如何使用vite搭建vue3項目詳解

3403771864 發布于2022-09-15 22:00 / 729人閱讀

　　須知：使用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配置

　　二：更改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,'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
　　}
　　]
　　// 創建
　　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 用法”直接復制所有代碼就可以

　　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）

請多多關注后續更多精彩內容。

GPU云服務器云服務器 vue3.0使用cdn svn服務器搭建完成后如何訪問項目數據中心idc項目建議書詳解域名綁定與使用詳解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/127737.html

關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
vue使用vite配置跨域以及環境配置詳解

　　這篇文章要說的就是如何配置跨域，代理域名，其實這個話題繞不開的，現在我們就說說vite的代理　　server:{ 　　proxy:{ 　　'/api':{ 　　target:'https://baidu.com', 　　changeOrigin:true, 　　rewrite:(path)=>path.replace(/^\/api/,''...

3403771864 2022-09-23 22:48 評論0 收藏0
《HelloGitHub》第 68 期

摘要：整個項目簡單還具有實用價值，可作為的實戰項目學習的調試工具欄。查看文檔自動在個人首頁展示編程時長的工具。通過學習這些前沿的人工智能論文，提前了解在未來更多可能性可以將圖片和視頻轉換成漫畫風格的工具。興趣是最好的老師，HelloGitHub 讓你對編程感興趣！簡介HelloGitHub 分享 GitHub 上有趣、入門級的開源項目。https://github.com/521xueweihan...

番茄西紅柿 2021-11-26 11:11 評論0 收藏2637