一、安装vite搭建架子
vite中文文档：https://cn.vitejs.dev/guide/
vue3中文文档：https://vue3js.cn/docs/zh/guide/introduction.html
1、搭建项目： npm init vite-app 项目名称
2、 进入项目： cd 项目名称
3、安装依赖： npm install
4、启动项目： npm run dev
这是安装完依赖后的项目结构
image.png
二、安装vue全家桶
1、安装router
npm install vue-router@4
（1）在src目录下新建router文件夹，然后在里面新建index.js文件
image.png
index.js
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/',
redirect: '/index'
},
{
path: '/index',
name: 'index',
component: () => import('../views/index.vue')
},
]
})
export default router
（2）在src目录下新建views文件夹，然后在里面新建index.vue文件
<template>
<img alt="Vue logo" src="../assets/logo.png" />
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>
<script>
import HelloWorld from '../components/HelloWorld.vue'
export default {
name: 'Index',
components: {
HelloWorld
}
}
（3）修改App.vue
<template>
<a-config-provider>
<router-view />
</a-config-provider>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
（4）将router引入到main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router'
createApp(App)
.use(router)
.mount('#app')
2、安装vuex
npm install vuex@next --save
（1）在src文件下新建store文件夹，然后分别新建index.js，state.js，getters.js，actions.js，mutations.js文件夹
state.js
export default {
user: ''
}
mutations.js
export default {
CHANGE_USER(state,user) {
state.user = user;
}
}
getters.js
export const user = state => state.user
actions.js
export default {
changeUser(store) {
store.commit('CHANGE_USER','')
}
}
index.js
import { createStore } from 'vuex'
import state from './state'
import actions from './actions'
import mutations from './mutations'
export default createStore({
state,
mutations,
actions,
modules: {}
})
（2）将vuex引入到main.js
简单配置一下，具体的还是看文档
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router'
import store from './store'
createApp(App)
.use(store)
.use(router)
.mount('#app')
三、配置vite.config.js
1、在根目录下新建vite.config.js文件
image.png
const path = require('path');
const fs = require('fs')
const vue = require('@vitejs/plugin-vue')
module.exports = ({ command,mode }) => {
// 判断是生产环境还是开发环境
const VITE_APP_IS_SERVE = command === 'serve' ? true : false;
return {
plugins: [vue()],
// 支持别名
resolve:{
alias: {
'/@': path.resolve(__dirname, 'src'),
},
},
css: {
preprocessorOptions: {
scss: {
// TODO css变量暂时使用scss，后期会改成css3变量
additionalData: content => {
// content = content.replace(/\/@\/assets/g,'/src/assets')
return `
$--color-blue: #1890ff;
$--color-red: #FF4D4F;
$--vab-margin: 24px;
$--vab-padding: 24px;
$--vab-header-height: 48px;
${content}`
},
},
},
},
define: {
VITE_APP_IS_SERVE,
},
server: {
open: false, // https://vitejs.dev/config/#server-open
proxy: {
// https://vitejs.dev/config/#server-proxy
[VITE_APP_BASE_API]: {
target: VITE_APP_BUILD_BASE_API,
changeOrigin: true,
rewrite: path => path.replace(new RegExp(`^${VITE_APP_BASE_API}`), ''),
},
[VITE_APP_FILE_SERVICE_API]: {
target: VITE_APP_BUILD_FILE_SERVICE_API,
changeOrigin: true,
rewrite: path => path.replace(new RegExp(`^${VITE_APP_FILE_SERVICE_API}`), ''),
},
},
},
build:{
terserOptions:{
compress:{
drop_console: true
}
},
}
}
}
四、踩坑
1、package.json: No license field
在package.json中添加 "license": "MIT"，项目许可证，让使用者知道是如何被允许使用此项目
