安裝vue-cli3

時間 2019-11-12

標籤安裝 vue cli3 cli 简体版

原文原文鏈接

1、安裝 @vue/clihtml

vue-cli2.x.x 版本安裝
npm install -g vue-cli
# OR
yarn global add vue-cli

vue-cli2.x.x 版本卸載
npm uninstall -g vue-cli 
# OR 
yarn global remove vue-cli

更新到 3.x 以後，vue-cli 的包名從 vue-cli 改爲了 @vue/clivue

vue-cli3.x.x 版本安裝
npm install -g @vue/cli
# OR
yarn global add @vue/cli

vue-cli3.x.x 版本卸載
npm uninstall -g @vue/cli
# OR 
yarn global remove @vue-cli

2、建立項目的三種方式webpack

1.x 和 2.x 的 vue-cli 採用 init 命令建立項目web

vue init webpack my-project

Vue CLI >= 3 和舊版使用了相同的 vue 命令，因此 Vue CLI 2 (vue-cli) 被覆蓋了。若是你仍然須要使用舊版本的 vue init 功能，你能夠全局安裝一個橋接工具：vue-router

npm install -g @vue/cli-init
# `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同
vue init webpack my-project

2.vue/cli 3.x 新增了圖形化的方式來建立項目vuex

vue ui

而後瀏覽器會打開一個頁面，能夠按照頁面將的引導建立項目vue-cli

3.x.x 的 vue-cli 採用 init 命令建立項目npm

vue create my-project

3、參數詳解json

使用 create 命令建立項目的時候，有不少配置項須要選擇瀏覽器

首先須要選擇模塊

若是選擇默認選項 default，將會構建一個最基本的 vue 項目（沒有 vue-router 也沒有 vuex）

這裏推薦選擇第二項 Manually select features

而後根據本身的需求，使用空格鍵選擇具體的模塊

TypeScript 支持使用 TypeScript 書寫源碼。
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 預處理器。
Linter / Formatter 支持代碼風格檢查和格式化。
Unit Testing 支持單元測試。
E2E Testing 支持 E2E 測試。

勾選以後，使用回車鍵進入下一步

這裏須要選擇路由模式，yes 是 history 模式，no 是 hash 模式

能夠先從 hash 模式入手，不過實際項目一般採用 history 模式

而後選擇一個合適 CSS 的預編譯工具

代碼風格和eslint

選擇lint

選擇lint的配置文件如何存放，這裏我選了分別存到具體的config文件，而不是package，便於管理

是否保存本次建立項目的配置項，用於下次快速建立項目

4、vue.config.js

完成以上步驟以後，就已經能夠開發 vue 項目了，但沒法知足定製化的開發需求

這時候就須要手動建立一個 vue.config.js，官方的配置文檔能夠參考這裏

這裏我貼一個經常使用的 vue.config.js

// vue.config.js
module.exports = {
  publicPath: './',
  outputDir: 'dist', // 打包的目錄
  lintOnSave: true, // 在保存時校驗格式
  productionSourceMap: false, // 生產環境是否生成 SourceMap

  devServer: {
    open: true, // 啓動服務後是否打開瀏覽器
    host: '0.0.0.0',
    port: 8080, // 服務端口
    https: false,
    hotOnly: false,
    proxy: null, // 設置代理
    before: app => {}
  },
}