一、Vue-cli簡介

Vue CLI 是一個基于 Vue.js 進行快速開發(fā)的完整系統(tǒng)，提供：

通過 @vue/cli 搭建交互式的項目腳手架。
通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發(fā)。
一個運行時依賴 (@vue/cli-service)，該依賴：

可升級；
基于 webpack 構(gòu)建，并帶有合理的默認配置；
可以通過項目內(nèi)的配置文件進行配置；
可以通過插件進行擴展。
一個豐富的官方插件集合，集成了前端生態(tài)中最好的工具。
一套完全圖形化的創(chuàng)建和管理 Vue.js 項目的用戶界面。
網(wǎng)址：
https://cli.vuejs.org/zh/

二、Vue-Cli3.0安裝

關(guān)于舊版本
Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。
如果你已經(jīng)全局安裝了舊版本的 vue-cli (1.x 或 2.x)，你需要先通過

 npm uninstall vue-cli -g 
或
 yarn global remove vue-cli 卸載它。

安裝3.0 Vue Cli

# 安裝3.0  Vue Cli
npm install -g @vue/cli

項目創(chuàng)建

# 創(chuàng)建一個項目
vue create hello-world
# 創(chuàng)建完成后，可以通過命令打開圖形化界面
vue ui

創(chuàng)建項目

選擇配置：
注意，空格鍵是選中與取消，A鍵是全選
TypeScript 支持使用 TypeScript 書寫源碼
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 預處理器。
Linter / Formatter 支持代碼風格檢查和格式化。
Unit Testing 支持單元測試。
E2E Testing 支持 E2E 測試。

選擇配置

選擇sass

代碼風格檢查

單元測試框架

i配置文件

其它的全部選擇: yes。

安裝依賴

啟動項目：

npm run serve

啟動項目

三、HTML 和靜態(tài)資源

public/index.html

四、配置文件

process.env.BASE_URL配置

vue-cli3的源碼部分：@vue/cli-service/lib/util/resolveClientEnv.js

process.env.BASE_URL配置

核心：env.BASE_URL = options.baseUrl；
在項目根目錄創(chuàng)建一個 vue.config.js文件，可進行baseUrl配置，接口代理以及其他配置。

主要配置文件：（vue.config.js）

tests-----單元測試目錄
.browserslistrc-----瀏覽器兼容配置文件
.eslintrc.js-----eslint代碼檢查配置
.postcssrc.js-----postcss配置文件
.package.json-----項目依賴和啟動的配置文件

新建文件：vue.config.js

const path = require('path');
//源碼路徑
function resolve(dir = '') {
  return path.join(__dirname, './src', dir);
}
//導入模塊資源
module.exports = {
    // 基本路徑
    publicPath: './',
    // 輸出文件目錄
    outputDir: 'dist',
    //放置生成的靜態(tài)資源 (js、css、img、fonts) 的 (相對于 outputDir 的) 目錄
    assetsDir: 'static',
    // 生產(chǎn)環(huán)境是否生成 sourceMap 文件
    productionSourceMap: false,
    // webpack-dev-server 相關(guān)配置
    devServer: {
      host: '0.0.0.0',
      //端口號
      port: 8082,
      https:false
    },
    chainWebpack: config => {
      config.plugins.delete('prefetch');
      config.plugins.delete('preload');
    },
    configureWebpack: {
      resolve: {
        alias: {
          core: resolve('core')
        }
      },
      optimization: {
        runtimeChunk: {
          name: entrypoint => `runtime~${entrypoint.name}`
        },
        splitChunks: {
          minChunks: 2,
          minSize: 20000,
          maxAsyncRequests: 20,
          maxInitialRequests: 30,
          name: false
        }
      }
    },
     //css相關(guān)配置
    css: {
      loaderOptions: {
        sass: {
          data:
            '@import "@/assets/scss/_var.scss";@import "@/assets/scss/_mixin.scss";'
        }
      }
    }
  };

端口修改
配置文件:vue.config.js

 devServer: {
        // 通知dev server在服務器啟動后打開瀏覽器。將其設置為true以打開默認瀏覽器。
        // Darwin是由蘋果電腦于2000年所釋出的一個開放原始碼操作系統(tǒng)。
        // process.platform：列舉node運行的操作系統(tǒng)的環(huán)境，只會顯示內(nèi)核相關(guān)的信息，
        // 如：linux2， darwin，而不是“Redhat ES3” ，“Windows 7”，“OSX 10.7”等；
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        // 將端口改為8081與服務端口一致，否則
        // 報GET http://localhost:8080/sockjs-node/info?t=1563288873572 404 (Not Found)
        port: 8088,
        https: false,
        hotOnly: false,
        disableHostCheck: false,
        // 設置代理
        proxy: {
            '/api': {
                // 目標 API 地址
                target: 'http://localhost:8081/',
                // 如果要代理 websockets,不使用請關(guān)閉
                ws: true,
                // 將主機標頭的原點更改為目標URL
                // changeOrigin: false,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },

五、環(huán)境變量和模式

.env                # 在所有的環(huán)境中被載入
.env.local          # 在所有的環(huán)境中被載入，但會被 git 忽略
.env.[mode]         # 只在指定的模式中被載入
.env.[mode].local   # 只在指定的模式中被載入，但會被 git 忽略
.env.development  # 只在生產(chǎn)環(huán)境執(zhí)行
.env.production   # 只在開發(fā)環(huán)境執(zhí)行

一個環(huán)境文件只包含環(huán)境變量的“鍵=值”對：

FOO=bar
VUE_APP_SECRET=secret

環(huán)境加載屬性
為一個特定模式準備的環(huán)境文件的 (例如 .env.production) 將會比一般的環(huán)境文件 (例如 .env) 擁有更高的優(yōu)先級。
此外，Vue CLI 啟動時已經(jīng)存在的環(huán)境變量擁有最高優(yōu)先級，并不會被 .env 文件覆寫。
模式：
模式是 Vue CLI 項目中一個重要的概念。默認情況下，一個 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，一個模式可以包含多個環(huán)境變量。也就是說，每個模式都會將 NODE_ENV 的值設置為模式的名稱
比如：在 development 模式下 NODE_ENV 的值會被設置為 "development"。
你可以通過為 .env 文件增加后綴來設置某個模式下特有的環(huán)境變量。比如，如果你在項目根目錄創(chuàng)建一個名為 .env.development 的文件，那么在這個文件里聲明過的變量就只會在 development 模式下被載入。
你可以通過傳遞 --mode 選項參數(shù)為命令行覆寫默認的模式。例如，如果你想要在構(gòu)建命令中使用開發(fā)環(huán)境變量，請在你的 package.json 腳本中加入：

"dev-build": "vue-cli-service build --mode development",

BASE_URL - 會和 vue.config.js 中的 publicPath 選項相符，即你的應用會部署到的基礎(chǔ)路徑。
NODE_ENV - 會是 “development”、“production” 或 “test”中的一個。具體的值取決于應用運行的模式。
示例：
package.json 配置文件

  "scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'",
    "test:unit": "vue-cli-service test:unit"
  }

創(chuàng)建環(huán)境文件：
.env.development

# 環(huán)境配置
NODE_ENV  = 'development'
# API地址
VUE_APP_BASE_API = 'http://localhost:8000/'
VUE_APP_ABC = '123'

環(huán)境變量的使用 :
只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端側(cè)的包中(即在項目代碼中使用)。
變量讀取

  console.log(process.env.VUE_APP_ABC);

注意：
更改了環(huán)境變量，必須重啟服務。

六、配置scss

1) 新建scss文件

src\styles\global.scss

$theme-color: red;

2) vue.config.js配置

module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      sass: {
        // 根據(jù)自己樣式文件的位置調(diào)整
        data: `@import "@/styles/global.scss";`
      }
    }
  }
}

3) 使用

<template>
  <div id="app">
    <div class="box">測試SCSS</div>
  </div>
</template>
<style lang="scss">
.box {
  background-color: $theme-color;
}
</style>

顯示結(jié)果

七、常見問題

1. TypeScript引入JS文件

tsconfig.json 配置

    "allowJs": true,

2. 項目運行時一直發(fā)http://localhost:8080/sockjs-node/info?t=1462183700002請求

請更改配置文件:vue.config.js
port: 8081修改端口即可

服務端口

    devServer: {
        // 通知dev server在服務器啟動后打開瀏覽器。將其設置為true以打開默認瀏覽器。
        // Darwin是由蘋果電腦于2000年所釋出的一個開放原始碼操作系統(tǒng)。
        // process.platform：列舉node運行的操作系統(tǒng)的環(huán)境，只會顯示內(nèi)核相關(guān)的信息，
        // 如：linux2， darwin，而不是“Redhat ES3” ，“Windows 7”，“OSX 10.7”等；
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        // 修改端口即可
        // 報GET http://localhost:8080/sockjs-node/info?t=1563288873572 404 (Not Found)
        port: 8081,
        https: false,
        hotOnly: false,
        disableHostCheck: false,
        // 設置代理
        proxy: {
            '/api': {
                // 目標 API 地址
                target: 'http://localhost:8081/',
                // 如果要代理 websockets,不使用請關(guān)閉
                ws: true,
                // 將主機標頭的原點更改為目標URL
                // changeOrigin: false,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },

This may cause things to work incorrectly. Make sure to use the same version for
問題：

vue@2.5.22 (C:\Users\Administrator\node_modules_vue@2.5.22@vue\dist\vue.runti
me.common.js)
vue-template-compiler@2.6.10 (C:\Users\Administrator\AppData\Roaming\npm\node_
modules@vue\cli\node_modules\vue-template-compiler\package.json)

This may cause things to work incorrectly. Make sure to use the same version for
both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify sho
uld bump vue-template-compiler to the latest.
解決：
刪除C:\Users\Administrator\node_modules_vue@2.5.22

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

VUE開發(fā)--Vue-Cli3(四十一)

VUE開發(fā)--Vue-Cli3(四十一)

一、Vue-cli簡介

二、Vue-Cli3.0安裝

三、HTML 和靜態(tài)資源

四、配置文件

五、環(huán)境變量和模式

六、配置scss

1) 新建scss文件

2) vue.config.js配置

3) 使用

七、常見問題

1. TypeScript引入JS文件

2. 項目運行時一直發(fā)http://localhost:8080/sockjs-node/info?t=1462183700002請求

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

VUE開發(fā)--Vue-Cli3(四十一)

一、Vue-cli簡介

二、Vue-Cli3.0安裝

三、HTML 和靜態(tài)資源

四、配置文件

五、環(huán)境變量和模式

六、配置scss

1) 新建scss文件

2) vue.config.js配置

3) 使用

七、常見問題

1. TypeScript引入JS文件

2. 項目運行時一直發(fā)http://localhost:8080/sockjs-node/info?t=1462183700002請求

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、Vue-cli簡介

二、Vue-Cli3.0安裝

三、HTML 和靜態(tài)資源

四、配置文件

五、環(huán)境變量和模式

六、配置scss

七、常見問題