小編給大家分享一下vue-cli@3.0怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
我們提供的服務有：網(wǎng)站設計制作、成都網(wǎng)站設計、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、集賢ssl等。為上1000家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的集賢網(wǎng)站制作公司
（一）安裝：
1、下載安裝node: 登陸node官網(wǎng)并選擇自己合適的node版本進行安裝；
2、安裝vue-cli腳手架工具
npm install -g @vue/cli # OR # 推薦使用 npm install -g yarn # 如果已有安裝，此步驟不需要 yarn global add @vue/cli
（二）創(chuàng)建一個項目：
vue create my-project # OR vue ui 選擇合適的配置 # 版本信息 Vue CLI v3.7.0 ? Please pick a preset: # 基礎配置 vue-cli3-demo (vue-router, vuex, sass, babel, typescript, unit-mocha) default (babel, eslint) # 自定義配置，這里我們選擇自定義選項，點擊回車 > Manually select features
選擇需要的插件及編譯工具
? Check the features needed for your project: # 代碼轉換，可以讓你更好的書寫前沿技術 (*) Babel # JavaScript 的一個超集，好東西用起來 (*) TypeScript # PWA支持,不要求使用可以不選 ( ) Progressive Web App (PWA) Support (*) Router (*) Vuex # css預編譯器 (*) CSS Pre-processors # 代碼格式化 (*) Linter / Formatter # 書寫單元測試用的，不要求使用可以不選 >(*) Unit Testing ( ) E2E Testing
接下來的配置選項
# 是否使用class風格進行組件開發(fā) ? Use class-style component syntax? Yes # 使用 babel 對 TypeScript 代碼進行編譯轉換 ? Use Babel alongside TypeScript for auto-detected polyfills? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes # 選擇css預編譯，這里我們選擇Sass/SCSS ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass) # 選擇代碼格式化配置 ? Pick a linter / formatter config: Standard # 代碼檢查方式 ? Pick additional lint features: (Pressto select, to toggle all, to invert selection)Lint on save # 選擇單元測試工具 ? Pick a unit testing solution: Mocha # 是否將配置放在單獨的文件中 ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files # 是否將此次配置保存 ? Save this as a preset for future projects? No
最后
cd my-project npm run install npm run serve # OR 推薦使用 yarn install yarn serve
（三）目錄結構
（四）環(huán)境變量配置
環(huán)境變量說明
.env # 在所有的環(huán)境中被載入
.env.local # 在所有的環(huán)境中被載入，但會被 git 忽略
.env.[mode] # 只在指定的模式中被載入
.env.[mode].local # 只在指定的模式中被載入，但會被 git 忽略
新建環(huán)境變量 .env.development.text 用于測試環(huán)境 并添加如下代碼
NODE_ENV='development' VUE_APP_URL='你的測試環(huán)境域名'
只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端側的包中。你可以在應用的代碼中這樣訪問它們：
console.log(process.env.VUE_APP_URL)
修改 package.json ,并在 scripts 里面添加如下代碼
"serve:test": "vue-cli-service serve --mode development.test",
（五）添加配置文件 vue.config.js
vue.config.js 是一個可選的配置文件，如果項目的 (和 package.json 同級的) 根目錄中存在這個文件，那么它會被 @vue/cli-service 自動加載。你也可以使用 package.json 中的 vue 字段，但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫。
重慶分公司
重慶分公司
// vue.config.js
module.exports = {
// baseUrl從 Vue CLI 3.3 起已棄用，請使用publicPath。
// baseUrl:'./',
// 配置sub-path后訪問路徑為https://xxx-path/sub-path/#/
publicPath: process.env.NODE_ENV === 'production' ? '/sub-path/' : '/',
// 輸出文件路徑，默認為dist
outputDir: 'dist',
// 放置生成的靜態(tài)資源 (js、css、img、fonts) 的 (相對于 outputDir 的) 目錄。
assetsDir: '',
// 指定生成的 index.html 的輸出路徑 (相對于 outputDir)。也可以是一個絕對路徑
indexPath: '',
// 配置多頁應用
pages: {
index: {
// page 的入口
entry: 'src/index/main.js',
// 模板來源
template: 'public/index.html',
// 在 dist/index.html 的輸出
filename: 'index.html',
// 當使用 title 選項時，
// template 中的 title 標簽需要是 <%= htmlWebpackPlugin.options.title %>
title: 'Index Page',
// 在這個頁面中包含的塊，默認情況下會包含
// 提取出來的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 當使用只有入口的字符串格式時，
// 模板會被推導為 `public/subpage.html`
// 并且如果找不到的話，就回退到 `public/index.html`。
// 輸出文件名會被推導為 `subpage.html`。
subpage: 'src/subpage/main.js',
},
lintOnSave: true, // 保存時 lint 代碼
// css相關配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開啟 CSS source maps?
sourceMap: false,
// css預設器配置項
loaderOptions: {
// pass options to sass-loader
sass: {
// 自動注入全局變量樣式
data: `
@import "src/你的全局scss文件路徑";
`
}
},
// 啟用 CSS modules for all css / pre-processor files.
modules: false,
},
// 生產(chǎn)環(huán)境是否生成 sourceMap 文件
productionSourceMap: false,
//是否為 Babel 或 TypeScript 使用 thread-loader。該選項在系統(tǒng)的 CPU 有多于一個內核時自動啟用，僅作用于生產(chǎn)構建。
parallel: require('os').cpus().length > 1,
// 所有 webpack-dev-server 的選項都支持
devServer: {
port: 8080, // 配置端口
open: true, // 自動開啟瀏覽器
compress: true, // 開啟壓縮
// 設置讓瀏覽器 overlay 同時顯示警告和錯誤
overlay: {
warnings: true,
errors: true
},
// 設置請求代理
proxy: {
'/api': {
target: '',
ws: true,
changeOrigin: true
},
'/foo': {
target: ''
}
}
},
} （六）修改 webpack 配置信息
vue-cli3.0 的版本已經(jīng)將 webpack 的配置整合進 vue.config.js 里面了
// 安裝 babel-polyfill // npm install babel-polyfill 或者 yarn add babel-polyfill // 安裝 uglifyjs-webpack-plugin // npm install uglifyjs-webpack-plugin -D 或者 yarn add uglifyjs-webpack-plugin -D
// vue.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
chainWebpack: config => {
// 引入babel-polyfill
config
.entry('index')
.add('babel-polyfill')
.end();
// 添加文件路徑別名
config.resolve.alias.set("@", resolve("src"));
if (isProduction) {
// 生產(chǎn)環(huán)境注入cdn
config.plugin('html')
.tap(args => {
args[0].cdn = cdn;
return args;
});
}
},
configureWebpack: config => {
if (isProduction) {
// 為生產(chǎn)環(huán)境修改配置...
config.plugins.push(
//添加代碼壓縮工具，及設置生產(chǎn)環(huán)境自動刪除console
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true,
},
},
sourceMap: false,
parallel: true,
})
);
} else {
// 為開發(fā)環(huán)境修改配置...
}
},
}分離第三方插件，引入cdn配置
這里介紹一個開源的cdn庫www.bootcdn.cn/
// vue.config.js
const isProduction = process.env.NODE_ENV === 'production';
const cdn = {
css: [],
js: [
'https://xxx-cdn-path/vue.runtime.min.js',
'https://xxx-cdn-path/vue-router.min.js',
'https://xxx-cdn-path/vuex.min.js',
'https://xxx-cdn-path/axios.min.js',
]
}
module.exports = {
configureWebpack: config => {
if (isProduction) {
// 用cdn方式引入,分離第三方插件
config.externals = {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'axios': 'axios'
}
} else {
// 為開發(fā)環(huán)境修改配置...
}
},
}修改html文件