快捷導(dǎo)航

vue3.0項(xiàng)目快速搭建的完整步驟記錄

更新時(shí)間：2021年12月22日 13:05:35 作者：前端_李嘉豪

這篇文章主要給大家介紹了關(guān)于vue3.0項(xiàng)目快速搭建的相關(guān)資料,本文通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3.0具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

一、我們要確保vue/cli版本在4.5.0以上，才能更好的支持3.0

//安裝最新vue/cli
yarn global add @vue/cli 
//或
npm install -g @vue/cli

用vue -V查看安裝的版本號(hào)檢驗(yàn)是都成功安裝。

二、通過(guò)vue/cli3創(chuàng)建我們的第一個(gè)項(xiàng)目

vue create my-project

 ? Please pick a preset: (Use arrow keys)
 default (babel, eslint)   // 默認(rèn)選項(xiàng) 
 Manually select features  //  手動(dòng)選擇功能

很顯然以上兩個(gè)選擇都是Default默認(rèn)選項(xiàng)，第一步我們選擇手動(dòng)自定義選項(xiàng)

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel                              //  代碼編譯
( ) TypeScript                         //  ts
( ) Progressive Web App (PWA) Support  //  支持漸進(jìn)式網(wǎng)頁(yè)應(yīng)用程序
( ) Router                             //  vue路由
( ) Vuex                               //  狀態(tài)管理模式
( ) CSS Pre-processors                 //  css預(yù)處理
( ) Linter / Formatter                 //  代碼風(fēng)格、格式校驗(yàn)
( ) Unit Testing                       //  單元測(cè)試
( ) E2E Testing                        //  端對(duì)端測(cè)試

這一步我們根據(jù)我們的項(xiàng)目需要去選擇我們需要的一些配置，a全選,空格單選，在我們需要的配置項(xiàng)敲空格即可，選完之后回車確認(rèn)

Router

路由是否使用history模式,根據(jù)項(xiàng)目需求選擇

CSS 預(yù)編譯

這一步我選擇的是node-sass預(yù)處理類型，根據(jù)自己項(xiàng)目需求去選擇css預(yù)編譯類型

ESLint 語(yǔ)法校驗(yàn)

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only     //  只進(jìn)行報(bào)錯(cuò)提醒
  ESLint + Airbnb config                //  不嚴(yán)謹(jǐn)模式
  ESLint + Standard config              //  正常模式
  ESLint + Prettier                     //  嚴(yán)格模式
  TSLint (deprecated)                   //  TypeScript格式驗(yàn)證工具

這一步也可根據(jù)項(xiàng)目需求自行選擇

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save               // 保存時(shí)檢測(cè)
 ( ) Lint and fix on commit     // 修復(fù)和提交時(shí)檢測(cè)

選擇校驗(yàn)?zāi)Ｊ?，我選擇了保存時(shí)做校驗(yàn)，也推薦大家選擇保存的時(shí)候去做校驗(yàn)，也能及時(shí)的修改一些語(yǔ)法提示，比較方便去做語(yǔ)法調(diào)整

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files     //  存放在專用配置文件中
  In package.json               //  存放在package.json中

選擇Babel, ESLint等自定義配置的存放位置。這里建議大家選擇第一個(gè)

是否保存當(dāng)前選擇的配置項(xiàng)，如果當(dāng)前配置是經(jīng)常用到的配置，建議選擇y存儲(chǔ)一下當(dāng)前配置項(xiàng)。

運(yùn)行項(xiàng)目

到這一步我們的項(xiàng)目就已經(jīng)搭建好了根據(jù)提示，我們運(yùn)行一下項(xiàng)目。

cd may-project
yarn serve

升級(jí)vue

項(xiàng)目已經(jīng)跑起來(lái)了，這里我們要敲黑板了，如果現(xiàn)在我們直接用3.0的語(yǔ)法去開(kāi)發(fā)的話，會(huì)出現(xiàn)一個(gè)問(wèn)題，

<template>
  <div class="home">
    {{msg}}
  </div>
</template>

<script>
import { toRefs, reactive } from 'vue'
export default {
  name: 'Home',
  setup: () => {
    const state = reactive({
      msg: 'Hello World'
    })
    return {
      ...toRefs(state)
    }
  }
}
</script>

我們直接渲染msg頁(yè)面會(huì)一直給我們報(bào)錯(cuò)說(shuō)，msg變量沒(méi)有初始化

到這里我們不急，在看一下package.json,查看一下vue的版本，為什么不支持3.0的語(yǔ)法，結(jié)果問(wèn)題還真在這里

果然還是2.xx的版本號(hào)，那么我們升級(jí)一下版本

vue add vue-next

升級(jí)完之后我們?cè)诳匆幌聀ackage.json，果然已經(jīng)是3.0.0-beta.1版本

升級(jí)好，這下我們?cè)?code>yarn serve在運(yùn)行一下我們的項(xiàng)目

果然現(xiàn)實(shí)總是啪啪的打臉，還是沒(méi)跑起來(lái)，我們根據(jù)報(bào)錯(cuò)去看一下min.js

import {
  createApp
} from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')

我們稍作調(diào)整，不出所料我們的項(xiàng)目已經(jīng)正常運(yùn)行了！我們定義的msg字符串也渲染到了頁(yè)面上。