vue-cli的安裝使用

vue-cli 3.0

環境安裝

全新版本的腳手架、逼格很是高、 記住這個名字 @vue/cli ，對就是這個 你npm 或者yarn 安裝就好了，先保證全局環境有它。

npm install -g @vue/cli

   yarn global add @vue/cli

出現這個表示安裝成功：

add

 

建立項目

這裏對比下之前2.X以前的版本 ，新版本把插件以及模板等 移植到命令行界面了.

舊版	建立命令
2.x	vue init <template-name> <project-name>
3.x	vue create <project-name>

來一張圖把 ，這裏已經有幾個默認配好的模板了，咱們選最後的Manually select features

vue-cli3.0在你建立後會有一個保存當前配置的功能

 

配置項目插件和功能

這裏就很傻瓜了， 你要集成什麼 就選就好了。我這裏選個我比較經常使用的。

• TypeScript
• PWA
• Vue-router
• Vuex
• CSS預處理
• eslint prettier
• 自動化測試單元測試 、e2e

 

啓動項目

1. 進入目錄,啓動項目 這裏 vue-cli 3.x 默認會打開瀏覽器 地址也會打在控制檯。

yarn serve 
   // OR
   npm run serve

 

項目分析

首先看下總體目錄 比 2.x以前 是精簡了很多

 

去掉了2.x build和config等目錄 ,大部分配置 都集成到vue.config.js這裏了

vue.config.js裏
大概包括了配置 經常使用的輸出路徑名、跟目錄、預處理、devServer配置、pwa、dll、第三方插件等等
詳細配置能夠看官方文檔 詳細config配置

如何爲所欲爲

1. 服務器配置修改

這裏我先改個端口, 修改vue.config.js 而後從新啓動工程 , 能夠看到已經改爲5999端口了

module.exports = { lintOnSave: false, devServer: { port: 5999 } }

2. 經常使用webpack配置修改

webpack的配置在這個屬性裏修改configureWebpack  

包括plugins也能夠本身擴展 ，自己尤大已經把經常使用的都封裝了 ，不知足能夠自行擴展。

這裏改個webpack devtool輸出方式、默認那個我屬實不知道怎麼跟蹤代碼

configureWebpack: config => { if (process.env.NODE_ENV === 'development') { config.devtool = 'source-map' // mutate config for production... } } 

其餘配置 就不一一介紹了 具體能夠看這裏webpack

3. 全局變量的設置

在項目根目錄 建立二個文件

.env.development
.env.production

裏面配置鍵值對就好了

但要注意 這裏必須以 VUE_APP開頭

這樣咱們就能夠自定義個全局變量在某個模式下

VUE_APP_MOCK_URL = 'http://xxxx.xxx.xx.xx/mockjs/'

好比這樣在axios中就能夠配置根路徑了

const service = axios.create({ baseURL: process.env.VUE_APP_MOCK_URL }) 

總結

本文使用vue-cli3.x 從環境、到建立、到配置、和經常使用項目技巧進行了簡單介紹，但願能夠幫助到剛使用的人 。

整理vue-cli的安裝步驟：

 使用vue-cli生成項目步驟：

前提是必須先安裝nodejs，安裝完成後，能夠在shell中使用node-v和npm-v查看安裝的版本。
     一、安裝nodejs
        node -v
        npm -v
     二、Vue CLI須要Node.js 8或更高版本（建議8.10.0以上）
        執行以下：npm install -g @vue/cli
        
        看到了：@vue/cli@3.0.0-rc.3表示安裝成功了
        或者是：C:\Users\Administrator>vue -V
                3.0.0-rc.3
                
     三、vue create hello-world生成新項目
    
     必定要連網，等待它下載完成
    
     4.下載完成後運行兩條命令：
         $ cd hello-world
         $ npm run serve
        
         在2.0的版本中：   npm run dev
            npm start
        

vue-cli2.0 版本  生成項目的命令：

　　vue init  webpack-simple(模板的名字)  項目的名字

　　template:webpack-simple|webpack

　　init[options]    <template>   <app-name>  generate a project from a remote template(legacy API,requires @vue/cli-init)