Vue3.0+vite2.0+elementPlust+vuex4.0+vue-router4.0

Vue3.0已经发布了好几个月了，之前学了一点vue3.0的东西，感觉和目前vue2.0差距还是比较大的，最近公司项目不是很紧张了，加上配套的生态也差不多快了。赶紧先尝个螃蟹，下面就开始吧

1、初始化项目

//安装vite:
# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-vue-app -- --template vue

支持的模板预设包括：

• vanilla
• vue
• vue-ts
• react
• react-ts
• preact
• preact-ts
• lit-element
• lit-element-ts
• svelte
• svelte-ts

2、项目已经创建好了，我们安装一下对应的依赖

npm i

运行跑一下就会看到vue的初始化页面

npm run dev

看一下目录结构

目录结构.png

.babelrc是我后面加的需要做element-plus的自定义主题加的，项目一开始readme.md也是没有的，需要自己加，如果需要的话。

另外使用vite搭建的项目，配置文件是根目录的vite.config.js，不得不说vite是真tm的快啊，非常适合我这种急性子

3、安装element-plus(参考官网就好了，全局引入，按需引入都有说明)

npm install element-plus --save

我使用的按需引入，按官网步骤来搞一哈
首先，安装 vite-plugin-style-import

npm install vite-plugin-style-import -D

修改vite.config.js,

需要注意的是vite.config.js配置写法是和之前的vue.config.js是完全不一样的，可以参考下图，因为现在我只是先熟悉vue3.0的写法，原理暂时先放一下，后面在研究

另外顺便在里面加一下别名配置，以及代理配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
const path = require("path");
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [{
        libraryName: 'element-plus',
        resolveStyle: (name) => {
          name = name.slice(3)
          return `element-plus/packages/theme-chalk/src/${name}.scss`;
        },
        resolveComponent: (name) => {
          return `element-plus/lib/${name}`;
        },
      }]
    }),
  ],
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src') }
    ],
  },
  server: {
    host: 'localhost',
    port: 3000,
    open: true, //自动打开浏览器
    strictPort: false,//如果端口占用，是退出，还是尝试其他端口
    https: false,// 是否开启 https
    // proxy: {
    //   '/api': {
    //     target: 'http://jsonplaceholder.typicode.com/',
    //     changeOrigin: true,
    //     rewrite: (path) => path.replace(/^\/api/, ''),
    //   },
    // },
  },
  build: {
    outDir: 'dist',//Specify the output directory (relative to project root).
  }
})

main.js

import { createApp } from 'vue' 
import router from './router'  //引入router组件
import App from './App.vue'
import element from "@/assets/js/element-components";  //这里我将element按需引入的组件分离出去了，便面main.js过大
import '@/assets/css/element-variables.scss'  //配合element组件该更自定义主题设置
import 'element-plus/packages/theme-chalk/src/base.scss'
import store from '@/vuex/index.js'
const app = createApp(App)
app.use(store)
app.use(router)
app.config.globalProperties.$ELEMENT = { size: 'small' }


element(app);
app.mount('#app')

OK，目前项目基本已经就绪，下一节我们添加router以及添加element-plus组件的按需引入