vue3.0 + vite搭建前端项目爬坑

一、 vue + vite项目搭建

1. 搭建十分简单，一个命令完事。

   $ npm init vite-app <project-name>
   

2. 但是这个简单项目没有vue-router，没有vuex，也没有axios，写样式的时候也会报错，基本什么都干不了。

二、 引入vue-router4.0版本

1. 先安装vue-router 4.0版本，更新版本请查看npm

   npm i vue-router@4.0.0-rc.5
   

2. 创建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版本

1. 先安装vuex 4.0版本，更新版本请查看npm

   npm i vuex@4.0.0-rc.2
   

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配置

1. 这里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
     }
   }
   

六、其他问题

1. 如果css样式报错，提示sass未安装，使用npm install sass -D安装即可
2. 如果提示compiler-sfc未安装，使用npm install @vue/compiler-sfc -D安装即可

七、vite配置

1. 再根目录下创建vite.config.js文件，配置端口命令如下

   export default {
     port: 8080
   }
   

至此，一个基本项目就搭建完成啦，可以尽情玩耍啦。