1. 程式人生 > >vue-cli腳手架筆記

vue-cli腳手架筆記

會有 sel 功能 cor inf 轉換 save 上下 我們

官方配置的關於使用vue的各種功能,這些功能稱之為腳手架

vue不支持IE8,因為vue使用了IE8無法模擬的 ECMAScript 5特性

使用vue-cli腳手架會讓我們的工作非常方便

比如想編譯一下es6的語法就使用 babel loader 和 babel core(可以轉換es6代碼)

webpack中安裝babel loader babel core

npm install --save-dev babel-loader babel-core

下面利用npm安裝vue-cli

安裝vue-cli只需要安裝一次即可

1、安裝

npm i -g @vue/cli

或者使用yarn

yarn global add @vue/cli

2、創建項目

vue create 項目名稱

3、配置項選擇第二個自定義Manually select features

不使用默認形式default配置(不然會有esLint,有一個空格就會報錯)

使用上下鍵來切換配置

技術分享圖片

4、選擇需要配置的預設功能

比如:
Babel
Router
Vuex

技術分享圖片

選擇和取消選擇星星使用空格或者n鍵

然後選擇package.json

In dedicated config files 在專用配置文件中

In package.json

技術分享圖片

5、最後出現 cd 項目名稱和運行服務命令

比如
cd app
npm run serve 或者 yarnserve

輸出 cd項目名字 和 npm run serve 命令 運行服務

技術分享圖片

6、打開localhost:8080 訪問默認主頁

技術分享圖片

npm run serve可以重啟服

一個默認的vue文件裏面一般包含三項

template模板

style

script

其中template裏面必須有個根(頂級)容器

vue-cli腳手架筆記