一、 vue + vite项目搭建
-
搭建十分简单,一个命令完事。
$ npm init vite-app <project-name>
-
但是这个简单项目没有vue-router,没有vuex,也没有axios,写样式的时候也会报错,基本什么都干不了。
二、 引入vue-router4.0版本
-
先安装vue-router 4.0版本,更新版本请查看npm
npm i vue-router@4.0.0-rc.5
-
创建router.js,配置使用
import { createRouter, createWebHashHistory } from 'vue-router' const routes = [ { path: '/', name: 'Home', component: () => import(/* webpackChunkName: "home" */ './views/Home.vue') } ]; export default createRouter({ history: createWebHashHistory(), routes })
三、引入vuex4.0版本
-
先安装vuex 4.0版本,更新版本请查看npm
npm i vuex@4.0.0-rc.2
-
创建store.js,配置使用
import { createStore } from 'vuex' export default createStore({ state () { return { count: 0 } }, mutations: { increment (state) { state.count++ } } })
四、main.js配置
import { createApp } from 'vue'
import App from './App.vue'
import router from './router.js'
import axios from './lib/axios.js'
createApp(App).use(router).use(axios).mount('#app')
五、axios配置
- 这里axios拦截器什么都没写,只是说明vue3如何注册一个插件。
import axios from 'axios'; const server = axios.create({ // some config header: { 'Content-Type': 'application/json; charset=utf-8', 'X-Requested-with': 'XMLHttpRequest' } }) export default { install: function (app) { app.config.globalProperties.$api = server } }
六、其他问题
- 如果css样式报错,提示sass未安装,使用
npm install sass -D
安装即可 - 如果提示compiler-sfc未安装,使用
npm install @vue/compiler-sfc -D
安装即可
七、vite配置
-
再根目录下创建vite.config.js文件,配置端口命令如下
export default { port: 8080 }