2022年6月10日13:27:42

vite + vue3 + element-plus + axios + vueRouter + vuex + scss 搭建项目

准备工作

1.先搭建一个vue工程，这里有两种办法，一种是使用vue-cli ,另一种是使用vite(一种新的构建工具)，具体搭建传送门
2.搭建好项目后，我们就可以安装对应的库了，这里需要安装以下的这些库：

npm install --saveaxios 这个库不需要说使用next版本，vue升级和发起http请求没有直接的关系，所以axios不用说要不要升级安装axios官网
npm installelement-plus --save 这个库是element 团队针对vue3而专门开发的库，对于vue3的库，除了elment-plus外，还有ant-design 等element-plus 官网
npm installvue-router@4 这个是vue router 专门的库,现在还是带测试的版本，但是如果需要在vue3中使用路由，那么需要使用这个库，官网
npm installsass -D 这个是sass 的库，这里为啥不需要安装sass--loader 或者style-loader 或者 node-sass 呢？这个在设计的时候，vue3 的缔造者在设计vue 的时候已经考虑过这件事情，vite 这个构建工具里面集成了scss, less ,stylus 等，原话如下That said, Vite does provide built-in support for .scss, .sass, .less, .styl and .stylus files. There is no need to install Vite-specific plugins for them, but the corresponding pre-processor itself must be installed as a peer dependency:vite 的官网
npm installvuex@next --save 这个是vuex的库，如果需要使用则需要安装这个库，vuex官网

最后我的package.json 的情况如下：
vite + vue3 + element-plus + axios + vueRouter + vuex + scss 搭建项目

项目编写

在项目编写阶段，由于本人现在也是在体验vue3的阶段，下面可能也会有理解错误的地方，还请大家多多指教

配置vue的环境

直接在根目录建立vite.config.js，里面的常用配置如下：

const path=require('path')exportdefaultfunction(){return{// 代理，最重要，其他的都可以有默认配置
        proxy:{'/api':{
                target:'http://localhost:9011',
                changeOrigin:true,}},// 入口
        entry:'index.html',// 出口
        outDir:'./../public/html',// 打包后的跟路径
        base:'/',// 输出的静态资源的文件夹名称
        assetsDir:'assets',// 是否开启ssr服务断渲染
        ssr:false,// 重命名路径  path.resolve(__dirname, './src')
        alias:{'/@/': path.resolve(__dirname,'./src')},// 端口
        port:3002,// 是否自动开启浏览器
        open:false,// 开启控制台输出日志
        silent:false,// 那个包不需要打包
         optimizeDeps:{
            exclude:['element-plus']},// css预设的配置
        cssPreprocessOptions:{
            scss:{
                additionalData:'@import "style/var.scss";',// 添加公共样式},}}}

详细配置

起步的main.js

创建一个vue的实例，导入element-plus, 导入vue-router,
或者vuex，但是这里都需要通过createApp链式调用来使用插件

import{createApp}from'vue'import Appfrom'./App.vue'import ElementPlusfrom'element-plus';import'../style/index.scss';import'element-plus/lib/theme-chalk/index.css';import routerfrom"./router";import vuexfrom"./vuex";createApp(App).use(router).use(ElementPlus).use(vuex).mount('#app')

创建路由

在src文件夹下面创建router文件夹，里面配置vue的路由

import{createRouter, createWebHistory}from'vue-router';import{routes}from"./routes";const router=createRouter({
    history:createWebHistory(),// 路由的history模式
    routes,// 导入路由的配置， 和vue2里面的路由一样})exportdefault router;//注意： 在.vue组件中如果需要使用router,则需要导入useRouter这个方法，需要使用route,则需要导入，useRoute这个方法

是否需要状态管理工具

如果需要使用状态管理工具，那个在src下面创建一个store文件夹，然后里面写vuex的配置，我这里使用的是模块，模块里面的内容和vuex3是一样的，调用方式也是一样的

import{createStore}from'vuex'import userModulefrom"./userModule";exportdefaultcreateStore({
    modules:{
        userModule: userModule,}})//模块例子exportdefault{
    namespaced:true,
    state:{
        isLoading:false,
        data:null,},
    mutations:{// 设置是否正在加载setIsLoading(state, payload){
            state.isLoading= payload;},// 设置用户数据setData(state, payload){
            state.data= payload}},
    actions:{// 登录asynclogin({commit},{loginId, loginPwd}){commit('setIsLoading',true);const r=awaitlogin(loginId, loginPwd)commit('setData', r);commit('setIsLoading',false);return r;},}}// 注意： 如果在.vue组件中需要使用store,需要导入 userStore的这个方法// 例如：在vue的setup函数中使用import{useStore}from"vuex";import{computed}from"vue";import{useRouter}from"vue-router";exportdefault{setup(){const store=useStore();const router=useRouter();constloginOut=()=>{
      store.dispatch('userModule/loginOut');
      router.push('/login')}return{
      isLoading:computed(()=> store.state.userModule.isLoading),
      data:computed(()=> store.state.userModule.data),
      loginOut,}}}

直接撸代码

对于撸代码的话，和vue2里面的差不多，只是vue3里面增加了compositionAPI 里面有比较大的改动，在写代码的时候，难免会有磕磕碰碰，祝愿大家在写代码的时候，写的都对。

这篇文章是基于本人想实现一个图片的网站，后台使用node,前台使用vue3，作为自己的练手项目，毕竟公司里面现在使用vue3对自己也哪方面都不好。有兴趣的可以看看项目地址演示地址