本節(jié)知識(shí)點(diǎn)
(1) 通過官方文檔查看vuecli3.0安裝
(2) 通過自定義來安裝vuecli3.0
(一) 通過官方文檔來安裝vuecli3.0
在這之前請(qǐng)電腦上安裝好node
中文文檔請(qǐng)移步到這里：點(diǎn)擊我跳轉(zhuǎn)到官方文檔
(二)通過自定義方式來安裝
(0) 使用之前要是網(wǎng)速不給力。請(qǐng)使用淘寶鏡像這樣在安裝使用cnpm來安裝，為了方便起見我下面的安裝步驟沒有使用cnpm而用的npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
(1) 使用vuecli3.0
npm i @vue/cli -g
or
yarn global add @vue/cli
安裝完以后可以查看版本 注意-V需要大寫
PS D:\工作\代碼\VueAll\vue3.0Test> vue -V
3.3.0
要是想查看其他命令可以使用
PS D:\工作\代碼\VueAll\vue3.0Test> vue -h
Usage: vue <command> [options]
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
create [options] <app-name> create a new project powered by vue-cli-service // 創(chuàng)建一個(gè)由vue-cli-service 支持的新項(xiàng)目
add [options] <plugin> [pluginOptions] install a plugin and invoke its generator in an already created project // 在已有的項(xiàng)目中添加插件
invoke [options] <plugin> [pluginOptions] invoke the generator of a plugin in an already created project // 在開發(fā)者模式下零配置運(yùn)行一個(gè)js或vue文件
inspect [options] [paths...] inspect the webpack config in a project with vue-cli-service // 在vue-cli-service的項(xiàng)目中檢查webpack配置
serve [options] [entry] serve a .js or .vue file in development mode with zero config // 可以理解為開發(fā)環(huán)境下啟動(dòng)命令
build [options] [entry] build a .js or .vue file in production mode with zero config // 打包 （在生產(chǎn)模式下零配置構(gòu)建一個(gè)js或者vue文件）
ui [options] start and open the vue-cli ui // vue3.0提供的一個(gè)UI
init [options] <template> <app-name> generate a project from a remote template (legacy API, requires @vue/cli-init) // // 舊api 需要@vue/cli-init // 就是原來的vue-cli init <template> <app-name>
config [options] [value] inspect and modify the config // 項(xiàng)目配置文件
upgrade [semverLevel] upgrade vue cli service / plugins (default semverLevel: minor) // 更新插件或者配置文件
info print debugging information about your environment // 打印出來vue配置文件
Run vue <command> --help for detailed usage of given command.
(2) 創(chuàng)建一個(gè)項(xiàng)目
vue create 項(xiàng)目名稱(必須小寫)
這個(gè)時(shí)候你會(huì)看到
Vue CLI v3.3.0
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
Manually select features
鍵盤上下選擇(默認(rèn))還是手動(dòng)(Manually) 要是選擇default那就一路回車就行。我在這里選擇手動(dòng)
Vue CLI v3.3.0
? Please pick a preset:
default (babel, eslint)
> Manually select features
(3)這個(gè)時(shí)候你會(huì)看見一些配置供你選擇
Vue CLI v3.3.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
需求不一樣，配置不一樣 我在這里選擇了這幾個(gè)
Vue CLI v3.3.0
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
>(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
(4) 模塊安裝詢問
(i)我因?yàn)榘惭b了router所以會(huì)彈出來
Vue CLI v3.3.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
選擇Y
以下我就不列舉了。最后到這里要說明下
Vue CLI v3.3.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save // 保存就檢測(cè) (我一般選擇它)
( ) Lint and fix on commit // fix和commit檢查
我在這里選擇了router ,Less ,ESlint_Prettier作為代碼檢查
Vue CLI v3.3.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 獨(dú)立文件夾
In package.json // 放入package.json里 (我一般選擇它)
這里他會(huì)問你把babel .eslint這些文件放在獨(dú)立的文件里還是package.json里
Vue CLI v3.3.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) N //是否記錄下，以便下次繼續(xù)使用這套配置
這里我選擇N 不記錄
(5)確定后等待下載依賴模塊
Vue CLI v3.3.0
? Creating project in D:\工作\代碼\VueAll\vue3.0Test\demo1.
?? Initializing git repository...
? Installing CLI plugins. This might take a while...
> yorkie@2.0.0 install D:\工作\代碼\VueAll\vue3.0Test\demo1\node_modules\yorkie
> node bin/install.js
setting up Git hooks
done
added 1114 packages from 746 contributors in 14.999s
?? Invoking generators...
?? Installing additional dependencies...
added 48 packages from 93 contributors, updated 2 packages and moved 7 packages in 6.754s
? Running completion hooks...
?? Generating README.md...
?? Successfully created project demo1.
?? Get started with the following commands:
$ cd demo1
$ npm run serve
PS D:\工作\代碼\VueAll\vue3.0Test>
這樣表示安裝成功
(6)安裝后移動(dòng)到目錄 并啟動(dòng)
cd demo1 // 進(jìn)入項(xiàng)目目錄 這里demo1就是你一上來create 那個(gè)名稱
npm run serve // 這里和2不一樣了。2是run dev 而 3 是run serve
DONE Compiled successfully in 2232ms 10:27:38
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.8:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
9.png
安裝成功
(7) 查看下目錄結(jié)構(gòu)
1.png
(8) 解決跨域問題
在2里面要解決跨域問題必然會(huì)修改proxyTable
在3里面則需要修改端口，在根目錄下創(chuàng)建vue.config.js
vue.config.js相關(guān)配置請(qǐng)參考點(diǎn)擊我跳轉(zhuǎn)到vuecli3.0相關(guān)配置
// vue.config.js 配置說明
//官方vue.config.js 參考文檔 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 這里只列一部分，具體配置參考文檔
module.exports = {
//別名設(shè)置
configureWebpack: {
resolve: {
alias: {
'assets': '@/assets',
'components': '@/components',
'views': '@/views',
}
}
},
// 部署生產(chǎn)環(huán)境和開發(fā)環(huán)境下的URL。
// 默認(rèn)情況下，Vue CLI 會(huì)假設(shè)你的應(yīng)用是被部署在一個(gè)域名的根路徑上
//例如 https://www.my-app.com/。如果應(yīng)用被部署在一個(gè)子路徑上，你就需要用這個(gè)選項(xiàng)指定這個(gè)子路徑。例如，如果你的應(yīng)用被部署在 https://www.my-app.com/my-app/，則設(shè)置 baseUrl 為 /my-app/。
baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
// outputDir: 在npm run build 或 yarn build 時(shí) ，生成文件的目錄名稱（要和baseUrl的生產(chǎn)環(huán)境路徑一致）
outputDir: "dist",
//用于放置生成的靜態(tài)資源 (js、css、img、fonts) 的；（項(xiàng)目打包之后，靜態(tài)資源會(huì)放在這個(gè)文件夾下）
assetsDir: "assets",
//指定生成的 index.html 的輸出路徑 (打包之后，改變系統(tǒng)默認(rèn)的index.html的文件名)
// indexPath: "myIndex.html",
//默認(rèn)情況下，生成的靜態(tài)資源在它們的文件名中包含了 hash 以便更好的控制緩存。你可以通過將這個(gè)選項(xiàng)設(shè)為 false 來關(guān)閉文件名哈希。(false的時(shí)候就是讓原來的文件名不改變)
filenameHashing: false,
// lintOnSave：{ type:Boolean default:true } 問你是否使用eslint
lintOnSave: true,
//如果你想要在生產(chǎn)構(gòu)建時(shí)禁用 eslint-loader，你可以用如下配置
// lintOnSave: process.env.NODE_ENV !== 'production',
//是否使用包含運(yùn)行時(shí)編譯器的 Vue 構(gòu)建版本。設(shè)置為 true 后你就可以在 Vue 組件中使用 template 選項(xiàng)了，但是這會(huì)讓你的應(yīng)用額外增加 10kb 左右。(默認(rèn)false)
// runtimeCompiler: false,
/**
* 如果你不需要生產(chǎn)環(huán)境的 source map，可以將其設(shè)置為 false 以加速生產(chǎn)環(huán)境構(gòu)建。
* 打包之后發(fā)現(xiàn)map文件過大，項(xiàng)目文件體積很大，設(shè)置為false就可以不輸出map文件
* map文件的作用在于：項(xiàng)目打包后，代碼都是經(jīng)過壓縮加密的，如果運(yùn)行時(shí)報(bào)錯(cuò)，輸出的錯(cuò)誤信息無法準(zhǔn)確得知是哪里的代碼報(bào)錯(cuò)。
* 有了map就可以像未加密的代碼一樣，準(zhǔn)確的輸出是哪一行哪一列有錯(cuò)。
* */
productionSourceMap: false,
// 它支持webPack-dev-server的所有選項(xiàng)
devServer: {
host: "localhost", //也可以直接寫IP地址這樣方便真機(jī)測(cè)試
port: 8080, // 端口號(hào)
https: false, // https:{type:Boolean}
open: true, //配置自動(dòng)啟動(dòng)瀏覽器
// proxy: 'http://localhost:4000' // 配置跨域處理,只有一個(gè)代理
// 配置多個(gè)代理
proxy: {
"/api": {
target: "<url>", //寫地址
ws: true, // 允許跨域
changeOrigin: true, //允許跨域
pathRewrite: {
"^/api": ""
}
},
"/foo": {
target: "<other_url>"
}
}
}
};
(9)vuecli3 增加的內(nèi)容
(1) GUI 圖形化界面
這樣可以增加插件，添加配置 方便管理
vue ui
(2) 個(gè)人認(rèn)為最重要的就是
這個(gè)命令就是實(shí)現(xiàn)單個(gè)VUE文件的展示。以前要是寫.vue文件必須依賴腳手架來查看最后的效果
現(xiàn)在敲這個(gè)命令 他會(huì)讓你安裝一個(gè)包。安裝完以后。cd到這個(gè)文件的目錄下。然后敲這個(gè)命令就能實(shí)現(xiàn)單個(gè)文件的查看
vue serve xxx.vue(單個(gè)vue名稱)
(3) .env實(shí)現(xiàn)全局變量
在項(xiàng)目的根目錄下新建一個(gè)文件.env文件然后里面寫 名字URL可以隨便起但是前面的VUE_APP不能更改
VUE_APP_URL(你自己起的名字) = http://www.baidu.com
然后項(xiàng)目中要使用這個(gè)變量的話只有在data里面獲取這個(gè)變量,這樣就獲取到了
data(){
return{
url:process.env.VUE_APP_URL
}
}
