如何使用vite搭建vue3项目详解

目录

• 一：npm构建
• 二：更改http://localhost:3000/到8080与Network路由访问
• 三：配置vite别名（npm install @types/node --save-dev）
• 四 ：路由（npm install vue-router@4）
• 五：vuex(npm install vuex@next --save)
• 六：Eslint（可选）（npm install --save-dev eslint eslint-plugin-vue）
• 七：less/sass（可选）（npm install -D sass sass-loader）
• 总结

使用vite需要node版本在12以上

一：npm构建

1、npm init vite@latest

2、Project name:（项目名称）

3、Select a framework:（选择要用什么构建自己的项目，这边选vue）然后会有两个选项一个是vue（vue+js） ，一个是vue+ts，根据自己的项目需求来选

4、cd到项目下npm install 安装一下依赖

注：以下只针对vue3+ts配置，vue+js请移步

二：更改http://localhost:3000/到8080与Network路由访问

在vite.config.ts里面加入：（server对象为新增，其他均是原有代码）

1 2 3 4 5 6 7 8 9 10 11 12

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue'    // https://vitejs.dev/config/ export default defineConfig({   plugins: [vue()],   server:{     host:'0.0.0.0',//解决vite use--host to expose     port:8080,     open:true   } })

三：配置vite别名（npm install @types/node --save-dev）

在vite.config.ts里面加入：（resolve对象为新增)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path' import path from 'path'    // https://vitejs.dev/config/ export default defineConfig({   plugins: [vue()],   server:{     host:'0.0.0.0',//解决vite use--host to expose     port:8080,     open:true   },   resolve:{    alias: {       '@': path.resolve(__dirname, './src'),       '*': path.resolve('')     }   } })

在tsconfig.json里面加入：（baseUrl、paths为新增)

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/api/axiso/Axios.js",
    "src/api/axiso/Axios.js",
    "src/util/validate.js",
    "src/util/validate.js",
    "src/util/store.js",
    "src/util/store.js"
  ],
  "references": [{ "path": "./tsconfig.node.json" }]
}

四 ：路由（npm install vue-router@4）

src下新建目录router→index.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

import {createRouter,createMemoryHistory,RouteRecordRaw} from 'vue-router' import Layout from '@/components/HelloWorld.vue' const routes:Array<RouteRecordRaw> =[     {         path:'/',         name:'home',         component:Layout     } ] // 创建 const router = createRouter({     history:createMemoryHistory(),     routes }) // 暴露出去 export default router

在min.ts下 import router from './router/index' 引入路由 

在min.ts下 app.use(router)注册路由

在App.vue下<router-view></router-view>

五：vuex(npm install vuex@next --save)

src下新建目录store→index.ts

打开vuex官网（Vuex 是什么？ | Vuex）找到TypeScript支持下的“简化 useStore 用法”直接复制所有代码就可以

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

import { InjectionKey } from 'vue' import { createStore, useStore as baseUseStore, Store } from 'vuex'    export interface State {   count: number }    export const key: InjectionKey<Store<State>> = Symbol()    export const store = createStore<State>({   state: {     count: 0   },   mutations:{     setCount(state:State,i:number){         state.count = i     }   },   getters:{      getCount(state:State){         return state.count     }   } })    // 定义自己的 `useStore` 组合式函数 export function useStore () {   return baseUseStore(key) }

在min.ts下 import {store,key} from './store/index' 引入vuex

在min.ts下 app.use(store,key)注册路由

（如有疑问可参考官网TypeScript支持下的“useStore 组合式函数类型声明”）

六：Eslint（可选）（npm install --save-dev eslint eslint-plugin-vue）

根目录新建文件.eslintrc.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

module.exports = {     root: true,     parserOptions: {         sourceType: 'module'     },     parser: 'vue-eslint-parser',     extends: ['plugin:vue/vue3-essential', 'plugin:vue/vue3-strongly- recommended', 'plugin:vue/    vue3-recommended'],     env: {         browser: true,         node: true,         es6: true     },     rules: {         'no-console': 'off',         'comma-dangle': [2, 'never'] //禁止使用拖尾逗号 } }     } }

七：less/sass（可选）（npm install -D sass sass-loader）

转自

https://www.jb51.net/article/255347.htm