正確姿式使用vue cli3建立項目

時間 2019-11-06

標籤正確使用 vue cli3 cli 建立項目简体版

原文原文鏈接

前言

在19年8月份的時候，vue-cli更新到了3.X，新版本的腳手架封裝度更高，配置起來簡單許多，旨在讓用戶把精力都放在編寫業務代碼中，本人從vue-cli2.X過渡到3.X挺適應的，畢竟3.X腳手架已經自動搭建在webpack4上，因此不用你們再去從webpack3升級到webpack4,固然性能也提升了不少，因此推薦你們使用cli3.X版本去搭建本身的項目，經過這篇教程幫你們熟悉使用vue cli3去搭建vue項目。css

基於vue cli3開發的後臺管理系統，項目地址 vue-admin-webapp 歡迎star，forkhtml

安裝

卸載舊版本：

若是你以前都是基於vue-cli2.X,你須要先卸載它：vue

#卸載vue-cli
npm uninstall -g vue-cli 
複製代碼

Vue CLI 須要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。你可使用 nvm 或 nvm-windows 在同一臺電腦中管理多個 Node 版本。node

安裝vue-cli：

npm install -g @vue/cli  // 安裝cli3.x
vue --version 或者 vue -V  //查看版本是否爲3.x
複製代碼

Vue CLI >= 3 和舊版使用了相同的 vue 命令，因此 Vue CLI 2 (vue-cli) 被覆蓋了。若是你仍是想繼續使用2.x搭建項目，你能夠全局安裝一個橋接工具：webpack

npm install -g @vue/cli-init
# 而後你就能夠繼續使用vue init了
npm init webpack my-project
複製代碼

快速原型開發

你可使用 vue serve 和 vue build 命令對單個 *.vue 文件進行快速原型開發，不過這須要先額外安裝一個全局的擴展：git

npm install -g @vue/cli-service-global
複製代碼

安裝完成以後，就新建一個文件夾，並建立一個.vue文件，執行下面命令就跑起來了es6

vue serve app.vue  // 啓動服務
vue build app.vue  //打包出生產環境的包
複製代碼

以下圖，只要建立一個app.vue文件並執行 vue serve app.vue 就啓動服務了github

這是一個很棒的功能，用於開發一個庫、組件，作一些小demo等都是很是適合的！web

建立項目

初始化：

# 建立項目
vue create my-project // 其中my-project爲項目目錄名稱
複製代碼

點擊回車後，就不斷有攔路記者訪問你vue-cli

此處有兩個選擇：

default (babel, eslint) 默認配置提供babel和eslint支持
Manually select features 本身手動去選擇須要的配置

能夠同過上下鍵，空格來選擇，通常會選擇手動的配置以下：

對於每一項的功能，作一下簡單闡述：

Babel 主要是對es6語法轉換成兼容的js （選上）
TypeScript 支持使用TypeScript語法來編寫代碼
PWA PWA 支持
Router 支持vue路由配置插件（通常都會選擇）
Vuex 支持vue程序狀態管理模式 (通常都會選擇)
CSS Pre-processors 支持css預處理器（通常都會選擇）
Linter / Formatter 支持代碼風格檢查和格式化（選上）
Unit Testing 單元測試
E2E Testing E2E測試

那麼基於開發常見的項目，通常選擇以下：

選擇完成後回車：

這的意思是問你本次項目是否採用history模式，若是選擇Y,須要後臺配置具體看vueRouter官網解釋，這裏我門選擇 n

選擇完成後回車：

這裏是問你選擇一種css預處理，我項目通常使用SCSS，因此這塊我選擇第一個，回車後：

這裏是問你選擇一種格式化代碼方式，我用VSCode，因此通常選擇 ESlint + Prettier,選擇回車：

這裏問你何時進行代碼規則檢測，通常會選擇保存就檢測，也就是Lint on save 選擇回車：

這問將Babel,PostCSS,ESLint這些配置文件放哪，一般咱們會選擇放到獨立位置，讓package.json文件乾淨點，因此選擇第一個 點擊回車：

這裏是問你是否記錄此次配置選擇，選擇以後會讓你爲此次配置起一個名字，這樣下次能夠直接快速配置選擇，最後回車後就會初始化項目了，完成後以下圖：

根據提示，咱們執行指令 cd my-project 而後執行命令npm run serve 這樣就開始啓動項目了

這是打開 http://localhost:8080 ：

當咱們須要自定義webpack相關配置的時候須要在項目根目錄中建立vue.config.js文件，它會被@vue/cli-server自動加載，相關配置內容官網將的很詳細，能夠點擊查看

當咱們須要調整webpac k配置的時候，能夠經過chainWebpack屬性進行鏈式操做，這裏有個技巧就是經過 vue inspect --mode production product.js 或vue inspect > development.js 來導處生產和開發環境的配置文件，文件裏面包含了鏈式訪問的規則，這樣咱們就能夠經過鏈式操做來修改添加webpack配置。

好了整個初始化項目已經完成，接下來就是編寫代碼了，有關vue cli3還有個新功能就是使用圖形化界面建立/管理/運行項目，這裏我就不說，你們能夠去官網看看具體教程吧。