如何使用vite搭建vue3項(xiàng)目詳解
使用vite需要node版本在12以上
一:npm構(gòu)建
1、npm init vite@latest
2、Project name:(項(xiàng)目名稱)
3、Select a framework:(選擇要用什么構(gòu)建自己的項(xiàng)目,這邊選vue)然后會(huì)有兩個(gè)選項(xiàng)一個(gè)是vue(vue+js) ,一個(gè)是vue+ts,根據(jù)自己的項(xiàng)目需求來選
4、cd到項(xiàng)目下npm install 安裝一下依賴
注:以下只針對(duì)vue3+ts配置,vue+js請(qǐng)移步
二:更改http://localhost:3000/到8080與Network路由訪問
在vite.config.ts里面加入:(server對(duì)象為新增,其他均是原有代碼)
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對(duì)象為新增)
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
import {createRouter,createMemoryHistory,RouteRecordRaw} from 'vue-router' import Layout from '@/components/HelloWorld.vue' const routes:Array<RouteRecordRaw> =[ { path:'/', name:'home', component:Layout } ] // 創(chuàng)建 const router = createRouter({ history:createMemoryHistory(), routes }) // 暴露出去 export default router
在min.ts下 import router from './router/index' 引入路由
在min.ts下 app.use(router)注冊(cè)路由
在App.vue下<router-view></router-view>
五:vuex(npm install vuex@next --save)
src下新建目錄store→index.ts
打開vuex官網(wǎng)(Vuex 是什么? | Vuex)找到TypeScript支持下的“簡(jiǎn)化 useStore 用法”直接復(fù)制所有代碼就可以
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` 組合式函數(shù) export function useStore () { return baseUseStore(key) }
在min.ts下 import {store,key} from './store/index' 引入vuex
在min.ts下 app.use(store,key)注冊(cè)路由
(如有疑問可參考官網(wǎng)TypeScript支持下的“useStore 組合式函數(shù)類型聲明”)
六: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'] //禁止使用拖尾逗號(hào) } } } }
七:less/sass(可選)(npm install -D sass sass-loader)
總結(jié)
到此這篇關(guān)于如何使用vite搭建vue3項(xiàng)目的文章就介紹到這了,更多相關(guān)vite搭建vue3項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue實(shí)現(xiàn)移動(dòng)端頁面切換效果【推薦】
這篇文章主要介紹了Vue實(shí)現(xiàn)移動(dòng)端頁面切換效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11vue登錄頁面回車執(zhí)行事件@keyup.enter.native問題
這篇文章主要介紹了vue登錄頁面回車執(zhí)行事件@keyup.enter.native問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03關(guān)于vant的日歷組件,在iPhonex上可選日期空白
這篇文章主要介紹了關(guān)于vant的日歷組件,在iPhonex上可選日期空白,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04關(guān)于Vue 消除Token過期時(shí)刷新頁面的重復(fù)提示問題
很多朋友在token過期時(shí)刷新頁面,頁面長(zhǎng)時(shí)間未操作,再刷新頁面時(shí),第一次彈出“token失效,請(qǐng)重新登錄!”提示,針對(duì)這個(gè)問題該怎么處理呢,下面小編給大家?guī)碓蚍治黾敖鉀Q方法,一起看看吧2021-07-07vue響應(yīng)式原理與雙向數(shù)據(jù)的深入解析
Vue 最獨(dú)特的特性之一,是其非侵入性的響應(yīng)式系統(tǒng)。下面這篇文章主要給大家介紹了關(guān)于vue響應(yīng)式原理與雙向數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2021-06-06解決Vue在封裝了Axios后手動(dòng)刷新頁面攔截器無效的問題
這篇文章主要介紹了解決VUE在封裝了Axios后手動(dòng)刷新頁面攔截器無效的問題,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11Vue實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12