目录
- 一：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'
// 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:[
{
find:'@',
replacement:resolve(__dirname,'src')
}
]
}
})
|
四 ：路由（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
标签：npm,vue,ts,详解,install,vue3,import,vite From： https://www.cnblogs.com/suihung/p/16884316.html