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组件的按需引入
