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

使用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

posted @ 2022-11-12 17:52  RHCHIK  阅读(1515)  评论(0)    收藏  举报