如何使用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对象为新增,其他均是原有代码)
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对象为新增)
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,'class="lazy" data-src')
}
]
}
})
四 :路由(npm install vue-router@4)
class="lazy" data-src下新建目录router→index.ts
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)
class="lazy" data-src下新建目录store→index.ts
打开vuex官网(Vuex 是什么? | Vuex)找到TypeScript支持下的“简化 useStore 用法”直接复制所有代码就可以
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
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)
总结
到此这篇关于如何使用vite搭建vue3项目的文章就介绍到这了,更多相关vite搭建vue3项目内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341