五分鐘教你使用vue-cli3建立專案(新手入門)
目錄
- 一、搭建環境
- 二、Vue腳手架工具
- 三、建立專案
- 四、選擇manually select (enter鍵確認,並進入下一步)
- 五、選擇完成之後回車 這裡我們選擇3.x的
- 六、完成之後回車 出現以下介面
- 七、回車 出現以下介面
- 八、回車出現以下介面
- 九、回車出現以下介面
- 十、回車出現以下介面
- 十一、回車出現以下介面
- 十二、根據提示，啟動專案
一、搭建vue環境
安裝Node 官網下載Nodejs，如果希望穩定的開發環境則下LTS(Long Time Support)長期支援版，穩定。
點我進入node官網
安裝好後cmd輸入node -v查詢是否安裝成功，如下出現版本號即為成功。
二、Vue腳手架工具
全域性安裝vue-cli，命令列中輸入：
npm install --g vue-cli
國內直接使用 npm 的官方映象是非常慢的，這裡推薦使用淘寶映象或者yarn
淘寶映象的安裝如下
npm install -g cnpm --registry=https://registry.npm.taobao.org //安裝成功後 使用 cnpm i xxx 代替 npm install xxx
三、建立專案
vue create 專案名
vue create code //其中code為你的專案目錄名稱 (enter鍵確認,並進入下一步)
最開始回車會出現下面兩項
Default (Vue 3) ([Vue 3] babel,eslint)(預設配置 提供babel或者eslint支援)
Manually select features(手動選擇專案特性)
我們可以通過上下鍵，空格來選擇我們需要的，一般我們都會選擇手動配置
四、選擇manually select (enter鍵確認,並進入下一步)
對於每一項的功能，王同學做一個簡單的描述：
-
www.cppcns.com
- Babel 主要是對es6語法轉換成兼http://www.cppcns.com容的js （選上）
- TypeScript 支援使用TypeScript語法來編寫程式碼
- Progressive Web App (PWA) Support [把做的更像原生app]
- Router 支援vue路由配置外掛（一般都會選擇）
- Vuex 支援vue程式狀態管理模式 (一般都會選擇)
- CShttp://www.cppcns.comS Pre-processors 支援前處理器 （一般都會選擇） www.cppcns.com
- Linter / Formatter 支援程式碼風格檢查和格式化 （選上）
- Unit Testing 單元測試
- E2E Testing E2E測試
常見的專案選擇如下
五、選擇完成之後回車 這裡我們選擇3.x的
六、完成之後回車 出現以下介面
這裡的意思是問你本次專案是否採用history模式，如果選擇Y,需要後臺配置具體看vueRouter官網解釋，這裡我門選擇 n
七、回車 出現以下介面
這裡的意思是問你選擇哪一種CSS預處理語言，我的專案中一般使用的是SCSS我選擇第一個
八、回車出現以下介面
這裡的意思是選擇一種格式化程式碼方式：我一般選擇 ESLint + Prettier
九、回車出現以下介面
這裡的意思是問你什麼時候進行程式碼規則檢測，我一般會選擇儲存就檢測，也就是Lint on Save
十、回車出現以下介面
這裡的意思是將Babel,PostCSS,ESLint這些配置檔案放哪，通常我們會選擇放到獨立位置，讓package.json檔案乾淨點，所以選擇第一個
十一、回車出現以下介面
這裡是問你是否記錄這次配置選擇，選擇之後會讓你為這次配置起一個名字，這樣下次可以直接快速配置選擇，最後回車後就會初始化專案了，完成後如下圖：
十二、根據提示，啟動專案
根據指令提示 我們先執行cd code，然後執行npm run serve
十三、當我們需要自定義webpack相關配置的時候需要在專案根目錄中建立vue.config.js檔案，它會被@vue/cli-server自動載入，相關配置內容官網將的很詳細，大家可以自己去官網看 好了，今天的內容就到這裡了，本期結束 我們下期見！！！
到此這篇關於五分鐘教你使用vue-cli3建立專案(新手入門)的文章就介紹到這了,更多相關vue-cli3建立專案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！