Vue 3 + Vite2.0 + Element Plus + Vue-router4.0 + axios 搭建基础环境

1.基础环境

1.检查电脑环境是否安装稳定的node.js 版本>12.0.0   查看版本 node -v  
2.将 Node.js 升级到最新的稳定版本：  nvm install stable

2.搭建架子

1.使用npm:   npm init @vitejs/app
2.使用yarn:  yarn create @vitejs/app

打开cmd 命令

选择是vue 还是vue+typescript

npm install
npm run dev 启动成功

集成其他配置

• Router、Vuex、Element Plus、Axios、Stylus/Sass/Less等

• Router 安装

npm install vue-router@4

在router/index.js  
import { createWebHistory, createRouter } from 'vue-router'
import Layout from '@/layout'

export const constantRoutes = [
    // 默认重定向页面
  {
    path: '',
    component: Layout,
    redirect: '/personManage/person',
    hidden:true,
    children: [
      {
        path: '/index',
        component: () => import('@/views/index'),
        name: 'Index',
        meta: { title: '首页', icon: 'dashboard', affix: true }
      }
    ]
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes: constantRoutes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
});

export default router;

之后在 main.js 中 import router from './router'
挂载 app.use(router)

• Vuex 安装

npm install vuex@next --save
在 store/index.js 
import { createStore } from 'vuex'
import app from './modules/app'
import getters from './getters'
modules 目录下区分不同模块的状态进行管理
getters 对所有模块状态管理
const store = createStore({
  modules: {
    app,
  },
  getters
});

export default store
之后在 main.js 中 import store from './store'
挂载 app.use(store)

• Element Plus 安装

npm install element-plus --save

之后在 main.js 中
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

挂载 app.use(ElementPlus)

• Axios

npm install axios

在utils 中新建 request.js 文件
import axios from 'axios'

对请求响应拦截进行封装和全局提示

然后对应api 进行导入挂载

• Sass 安装

npm install sass -D
注意：不需要引入 sass 与webpack 相关的依赖包和loader
<style lang="scss" scoped></style>

3.全局引入scss变量

安装css 预处理
npm install postcss -D
npm install postcss-sass -D

在vite.config.js

css: {
   //css预处理
  preprocessorOptions: {
    scss: {
      //引入全局变量文件
      additionalData: `@import "@/styles/variables.scss";`,
      // javascriptEnabled: true,
      charset: false,
    },
  },
},

// 此文件不能在其他引用了