Vue CLi3入門

摘自：https://www.jianshu.com/p/cf9b56efd3b8

 

Vue CLi3入門

12018.11.15 14:16:17字數 1222閱讀 8895

地址

Vue CLi3 github
Vue CLi web

安裝

命名方式已經改成npm推薦的做用域規則，詳情查看此文章

npm i @vue/cli -g yarn add @vue/cli global # 查看版本 vue -V 

建立一個項目

vue create clidemoe  # 2.0中 vue init webpack clidemoe

 

 

若是版本小於3.0會提示讓你升級3.0以上。

 

 

 

 

第一次建立只會有兩個選項（default和Manually select features），1和2是我以前建立保存的。
這裏咱們主要看Manually select features：

 

 

首先是特性選擇（按空格鍵選中或取消，a全選，i反選）：

 

 

 

接着是選擇路由是否使用history模式：
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

 

 

接着選擇使用哪一種css預處理器：

 

 

 

 

最後選擇代碼風格等：

 

 

 

 

最後會問你是否保存本次選擇的配置：

 

 

 

 

接着又會問你特性的存放方式：

 

 

 

 

最後會問你是否保存本次預設

 

 

 

 

最後出現這兩行就說明建立完成了：

 

 

建立方式2：

 

 

使用圖形化vue ui建立項目：

 

 

1. 選擇包管理器
2. 選擇配置，能夠選擇默認，也能夠本身手動配置（通常手動配置），還能夠選擇以前配置過的（前提是有保存）

3.  

    

   選擇功能（插件）
    

   

    

4.  

    

   選擇配置
    

   

    
5. 若是勾選了保存預設，會有彈框讓你輸入此次保存的預設名
   建立好了，看看頁面
    

   

    
   
   插件
    

   

    
   
   依賴
    

   

    

默認啓動服務方式：

npm run serve  # 2.0中 npm run dev
npx vue-cli-service serve

對比：
CLi2啓動方式是webpack-dev-server --inline --progress --config build/webpack.dev.conf.js，使用的是webpack-dev-server搭的服務
CLi3啓動方式是vue-cli-service serve
vue-cli-service serve就是CLi服務，文件位於node_modules@vue\cli-service\bin

目錄結構

 

cli2

 

cli3

相較於2.0，3.0的目錄結構簡單了許多，少了build、config兩個目錄，安裝時自動下載了node_modules，3.0的webpack配置能夠在根目錄新建一個vue.config.js文件。
Vue CLi3.0刪除了config和build文件夾，如今配置webpack只須要在項目的根目錄下新建vue.config.js文件

#vue.config.js 完整默認配置 module.exports = { // 基本路徑 baseUrl: '/', // 輸出文件目錄 outputDir: 'dist', // 用於嵌套生成的靜態資產（js，css，img，fonts）的目錄。 assetsDir: '', // 以多頁模式構建應用程序。 pages: undefined, // eslint-loader 是否在保存的時候檢查 lintOnSave: true, // 是否使用包含運行時編譯器的Vue核心的構建。 runtimeCompiler: false, // 默認狀況下babel-loader忽略其中的全部文件node_modules。 transpileDependencies: [], // 生產環境sourceMap productionSourceMap: true, // webpack配置 configureWebpack: () => {}, chainWebpack: () => {}, // css相關配置 css: { // 啓用 CSS modules modules: false, // 是否使用css分離插件 extract: true, // 開啓 CSS source maps? sourceMap: false, // css預設器配置項 loaderOptions: {}, }, // webpack-dev-server 相關配置 devServer: { host: '0.0.0.0', port: 8080, https: false, hotOnly: false, proxy: null, // 設置代理 before: app => {} }, // enabled by default if the machine has more than 1 cores parallel: require('os').cpus().length > 1, // PWA 插件相關配置 pwa: {}, // 第三方插件配置 pluginOptions: { // ... } } 

瀏覽器兼容性

在package.json文件裏多了一個browserslist字段，這個字段指定了項目兼容到哪些瀏覽器。

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

這個字段會被babel用來肯定轉義的js特性和須要添加的css前綴。
參考資料：https://www.jianshu.com/p/bd9cb7861b85

插件

vue add eslint
vue add @vue/cli-plugin-eslint

安裝後會在src目錄下生成一個plugins目錄，裏面會生成插件的配置文件。

vue add 的設計意圖是爲了安裝和調用 Vue CLI 插件。這不意味着替換掉普通的 npm 包。對於這些普通的 npm 包，你仍然須要選用包管理器。
咱們推薦在運行 vue add 以前將項目的最新狀態提交，由於該命令可能調用插件的文件生成器並頗有可能更改你現有的文件。

HTML和靜態資源

CSS相關

Vue CLI 項目默認支持PostCss、CSS Modules 和 包含 Sass、Less、stylus在內的預處理器（包仍是要安裝的，只是不用配置了）。
預處理器：
在建立項目的時候選擇預處理器（sass/less/stylus）。若是當時沒有選好，內置的webpack任然會被預配置爲能夠完成全部的處理，你也能夠手動安裝相應的webpack loader：

npm i sass-loader node-sass -D
npm i less-loader less -D
npm i stylus-loader stylus -D

PostCSS：
Vue CLi默認開啓了autoprefixer（自動添加前綴），若是要配置目標瀏覽器，可以使用package.json的browserslist字段，因此開發時只需使用無前綴的css規則便可。

環境變量和模式

VueCLI移除了配置文件目錄後，如何自定義配置環境變量和模式？
環境變量：
通常項目中，咱們針對不一樣的開發環境，會配置不一樣的環境變量，下面這些文件會在不一樣的環境下被載入：

• .env #在全部環境中載入
• .env.development #在開發環境中被載入
• .env.production #在生產環境中被載入
• .env.local #在全部環境中載入，會被git忽略
• .env.development.local #在開發環境中載入，但會被git忽略
• .env.development.local #在生產環境中載入，但會被git忽略

1. 在根目錄下新建兩個文件.env.development，.env.production。用這兩個文件存放環境變量。

// env.development NODE_ENV=development VUE_APP_URL=http://123.com // env.production NODE_ENV=production VUE_APP_URL=http://456.com 

變量必須以VUE_APP_開頭
被載入的變量將會被vue-cli-service的全部命令、插件、依賴可用。

tips：
爲一個特定模式準備的環境文件將會比通常的環境文件擁有更高的優先級。（列如.env.development的優先級比.env高）。

模式：
默認狀況寫，一個Vue CLi項目有三個模式：

• development 模式用於 vue-cli-service serve
• production 模式用於 vue-cli-service build 和 vue-cli-service test:e2e
• test 模式用於 vue-cli-service test:unit

每一個模式都會將NODE_ENV的值設置爲模式的名稱——好比在development模式下NODE_ENV的值會被設置爲development。
能夠在package.json中，經過傳遞 --mode 選項參數爲命令行指定模式。

dev-build："vue-cli-service build --mode development"    #指定模式

案例

//vue.config.js module.exports = { baseUrl: process.env.NODE_ENV !== 'production' ? '/' : '/bl/', // 這裏在webpack配置時判斷不一樣環境下使用不一樣配置 configureWebpack: config => { if (process.env.NODE_ENV === "development") { config.devtool = "source-map"; } else if (process.env.NODE_ENV === "production") { config.devtool = "eval-source-map"; } } } 

若是安裝完vue-cli3後，還想用vue-cli2怎麼辦？這個時候就須要安裝一個橋接工具了

npm install -g @vue/cli-init //安裝完後 就還可使用 vue init 命令 vue init webpack my-demo 

 

 

12人點贊