一蹬铺、Vue-cli簡介
Vue CLI 是一個(gè)基于 Vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng)，提供：
- 通過 @vue/cli 搭建交互式的項(xiàng)目腳手架镀裤。
- 通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發(fā)。
一個(gè)運(yùn)行時(shí)依賴 (@vue/cli-service)，該依賴：
- 可升級喘沿；
- 基于 webpack 構(gòu)建，并帶有合理的默認(rèn)配置竭贩；
- 可以通過項(xiàng)目內(nèi)的配置文件進(jìn)行配置蚜印；
- 可以通過插件進(jìn)行擴(kuò)展。
- 一個(gè)豐富的官方插件集合留量，集成了前端生態(tài)中最好的工具窄赋。
- 一套完全圖形化的創(chuàng)建和管理 Vue.js 項(xiàng)目的用戶界面。
網(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
- 項(xiàng)目創(chuàng)建
# 創(chuàng)建一個(gè)項(xiàng)目
vue create hello-world
# 創(chuàng)建完成后错敢，可以通過命令打開圖形化界面
vue ui
-
選擇配置：
注意，空格鍵是選中與取消缕粹，A鍵是全選
TypeScript 支持使用 TypeScript 書寫源碼
Progressive Web App (PWA) Support PWA 支持稚茅。
Router 支持 vue-router 。
Vuex 支持 vuex 平斩。
CSS Pre-processors 支持 CSS 預(yù)處理器亚享。
Linter / Formatter 支持代碼風(fēng)格檢查和格式化。
Unit Testing 支持單元測試绘面。
E2E Testing 支持 E2E 測試欺税。
選擇配置
其它的全部選擇: yes。
- 啟動(dòng)項(xiàng)目：
npm run serve
三揭璃、HTML 和靜態(tài)資源
public/index.html
四晚凿、配置文件
- process.env.BASE_URL配置
vue-cli3的源碼部分：@vue/cli-service/lib/util/resolveClientEnv.js
核心：env.BASE_URL = options.baseUrl；
在項(xiàng)目根目錄創(chuàng)建一個(gè) vue.config.js文件塘辅，可進(jìn)行baseUrl配置晃虫，接口代理以及其他配置。
- 主要配置文件：（vue.config.js）
tests-----單元測試目錄
.browserslistrc-----瀏覽器兼容配置文件
.eslintrc.js-----eslint代碼檢查配置
.postcssrc.js-----postcss配置文件
.package.json-----項(xiàng)目依賴和啟動(dòng)的配置文件
新建文件：vue.config.js
const path = require('path');
//源碼路徑
function resolve(dir = '') {
return path.join(__dirname, './src', dir);
}
//導(dǎo)入模塊資源
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',
//端口號(hào)
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在服務(wù)器啟動(dòng)后打開瀏覽器。將其設(shè)置為true以打開默認(rèn)瀏覽器荆责。
// Darwin是由蘋果電腦于2000年所釋出的一個(gè)開放原始碼操作系統(tǒng)滥比。
// process.platform：列舉node運(yùn)行的操作系統(tǒng)的環(huán)境，只會(huì)顯示內(nèi)核相關(guān)的信息做院，
// 如：linux2盲泛， darwin，而不是“Redhat ES3” 键耕，“Windows 7”寺滚，“OSX 10.7”等；
open: process.platform === 'darwin',
host: '0.0.0.0',
// 將端口改為8081與服務(wù)端口一致屈雄，否則
// 報(bào)GET http://localhost:8080/sockjs-node/info?t=1563288873572 404 (Not Found)
port: 8088,
https: false,
hotOnly: false,
disableHostCheck: false,
// 設(shè)置代理
proxy: {
'/api': {
// 目標(biāo) API 地址
target: 'http://localhost:8081/',
// 如果要代理 websockets,不使用請關(guān)閉
ws: true,
// 將主機(jī)標(biāo)頭的原點(diǎn)更改為目標(biāo)URL
// changeOrigin: false,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
五村视、環(huán)境變量和模式
.env # 在所有的環(huán)境中被載入
.env.local # 在所有的環(huán)境中被載入，但會(huì)被 git 忽略
.env.[mode] # 只在指定的模式中被載入
.env.[mode].local # 只在指定的模式中被載入酒奶，但會(huì)被 git 忽略
.env.development # 只在生產(chǎn)環(huán)境執(zhí)行
.env.production # 只在開發(fā)環(huán)境執(zhí)行
一個(gè)環(huán)境文件只包含環(huán)境變量的“鍵=值”對：
FOO=bar
VUE_APP_SECRET=secret
環(huán)境加載屬性
為一個(gè)特定模式準(zhǔn)備的環(huán)境文件的 (例如 .env.production) 將會(huì)比一般的環(huán)境文件 (例如 .env) 擁有更高的優(yōu)先級蚁孔。
此外，Vue CLI 啟動(dòng)時(shí)已經(jīng)存在的環(huán)境變量擁有最高優(yōu)先級惋嚎，并不會(huì)被 .env 文件覆寫杠氢。
模式：
模式是 Vue CLI 項(xiàng)目中一個(gè)重要的概念。默認(rèn)情況下另伍，一個(gè) Vue CLI 項(xiàng)目有三個(gè)模式：
development 模式用于 vue-cli-service serve
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test 模式用于 vue-cli-service test:unit
注意：模式不同于 NODE_ENV鼻百，一個(gè)模式可以包含多個(gè)環(huán)境變量。也就是說质况，每個(gè)模式都會(huì)將 NODE_ENV 的值設(shè)置為模式的名稱
比如：在 development 模式下 NODE_ENV 的值會(huì)被設(shè)置為 "development"愕宋。
你可以通過為 .env 文件增加后綴來設(shè)置某個(gè)模式下特有的環(huán)境變量。比如结榄，如果你在項(xiàng)目根目錄創(chuàng)建一個(gè)名為 .env.development 的文件，那么在這個(gè)文件里聲明過的變量就只會(huì)在 development 模式下被載入囤捻。
你可以通過傳遞 --mode 選項(xiàng)參數(shù)為命令行覆寫默認(rèn)的模式臼朗。例如，如果你想要在構(gòu)建命令中使用開發(fā)環(huán)境變量蝎土，請?jiān)谀愕?package.json 腳本中加入：
"dev-build": "vue-cli-service build --mode development",
BASE_URL - 會(huì)和 vue.config.js 中的 publicPath 選項(xiàng)相符视哑，即你的應(yīng)用會(huì)部署到的基礎(chǔ)路徑。
NODE_ENV - 會(huì)是 “development”誊涯、“production” 或 “test”中的一個(gè)挡毅。具體的值取決于應(yīng)用運(yùn)行的模式。
示例：
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_ 開頭的變量會(huì)被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端側(cè)的包中(即在項(xiàng)目代碼中使用)暴构。
變量讀取
console.log(process.env.VUE_APP_ABC);
注意：
更改了環(huán)境變量跪呈，必須重啟服務(wù)段磨。
六、配置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>
七耗绿、常見問題
1. TypeScript引入JS文件
tsconfig.json 配置
"allowJs": true,
2. 項(xiàng)目運(yùn)行時(shí)一直發(fā)http://localhost:8080/sockjs-node/info?t=1462183700002請求
請更改配置文件:vue.config.js
port: 8081修改端口即可
devServer: {
// 通知dev server在服務(wù)器啟動(dòng)后打開瀏覽器苹支。將其設(shè)置為true以打開默認(rèn)瀏覽器。
// Darwin是由蘋果電腦于2000年所釋出的一個(gè)開放原始碼操作系統(tǒng)误阻。
// process.platform：列舉node運(yùn)行的操作系統(tǒng)的環(huán)境债蜜，只會(huì)顯示內(nèi)核相關(guān)的信息，
// 如：linux2究反， darwin寻定，而不是“Redhat ES3” ，“Windows 7”精耐，“OSX 10.7”等特姐；
open: process.platform === 'darwin',
host: '0.0.0.0',
// 修改端口即可
// 報(bào)GET http://localhost:8080/sockjs-node/info?t=1563288873572 404 (Not Found)
port: 8081,
https: false,
hotOnly: false,
disableHostCheck: false,
// 設(shè)置代理
proxy: {
'/api': {
// 目標(biāo) API 地址
target: 'http://localhost:8081/',
// 如果要代理 websockets,不使用請關(guān)閉
ws: true,
// 將主機(jī)標(biāo)頭的原點(diǎn)更改為目標(biāo)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
