vue3.0項(xiàng)目快速搭建的完整步驟記錄
如何搭建一個(gè)vue3.0基礎(chǔ)項(xiàng)目?
一、我們要確保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)是都成功安裝。
二、通過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ī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à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)J?,我選擇了保存時(shí)做校驗(yàn),也推薦大家選擇保存的時(shí)候去做校驗(yàn),也能及時(shí)的修改一些語法提示,比較方便去做語法調(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)跑起來了,這里我們要敲黑板了,如果現(xiàn)在我們直接用3.0的語法去開發(fā)的話,會(huì)出現(xiàn)一個(gè)問題,
<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頁面會(huì)一直給我們報(bào)錯(cuò)說,msg變量沒有初始化
到這里我們不急,在看一下package.json,查看一下vue的版本,為什么不支持3.0的語法,結(jié)果問題還真在這里
果然還是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í)總是啪啪的打臉,還是沒跑起來,我們根據(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字符串也渲染到了頁面上。
到此我們就跑通了我們的第一個(gè)vue3的項(xiàng)目
三、vue3.0相比vue2.0改進(jìn)和新特性
1.相比于vue2.0,性能有了明顯的提升;(據(jù)作者透露有了30%-300%的性能提升)
2.相比于vue2.0,打包體積明顯的縮??;采用Tree-shaking support將無用模塊剪輯,僅打包需要的,大大降低了打包的體積;
3.暴露了自定義渲染api,增加了可擴(kuò)展性;
4.底層完全采用typescript重寫,可以很好的支持ts;
5.新特性:增加組合式api( composition-api ),是我們可以以一種低侵入式的,更靈活的組合組件的邏輯;
總結(jié)
到此這篇關(guān)于vue3.0項(xiàng)目快速搭建的文章就介紹到這了,更多相關(guān)vue3.0項(xiàng)目快速搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue將毫秒數(shù)轉(zhuǎn)化為正常日期格式的實(shí)例
今天小編就為大家分享一篇vue將毫秒數(shù)轉(zhuǎn)化為正常日期格式的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09Vuex數(shù)據(jù)持久化實(shí)現(xiàn)的思路與代碼
Vuex數(shù)據(jù)持久化可以很好的解決全局狀態(tài)管理,當(dāng)刷新后數(shù)據(jù)會(huì)消失,這是我們不愿意看到的。這篇文章主要給大家介紹了關(guān)于Vuex數(shù)據(jù)持久化實(shí)現(xiàn)的思路與代碼,需要的朋友可以參考下2021-05-05electron-vue利用webpack打包實(shí)現(xiàn)多頁面的入口文件問題
項(xiàng)目需要在electron的項(xiàng)目中新打開一個(gè)窗口,利用webpack作為靜態(tài)資源打包器,發(fā)現(xiàn)在webpack中可以設(shè)置多頁面的入口,今天來講一下我在electron中利用webpack建立多頁面入口的踩坑經(jīng)驗(yàn),需要的朋友可以參考下2019-05-05vue實(shí)現(xiàn)商城秒殺倒計(jì)時(shí)功能
這篇文章主要介紹了vue實(shí)現(xiàn)商城秒殺倒計(jì)時(shí)功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12vite項(xiàng)目添加eslint?prettier及husky方法實(shí)例
這篇文章主要為大家介紹了vite項(xiàng)目添加eslint?prettier及實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07基于vue3&element-plus的暗黑模式實(shí)例詳解
實(shí)現(xiàn)暗黑主題的方式有很多種,也有很多成型的框架可以直接使用,下面這篇文章主要給大家介紹了關(guān)于基于vue3&element-plus的暗黑模式的相關(guān)資料,需要的朋友可以參考下2022-12-12