vue-cli3.0搭建與配置
如何新建項目
使用 npm 全局安裝 vue-cli ：
npm install -g @vue/cli //如果已經(jīng)安裝過就不用安裝了
創(chuàng)建項目執(zhí)行：
vue create my-project
選擇項目類型
Vue CLI v3.0.0-beta.6
? Please pick a preset: (Use arrow keys)
> xs-default (vue-router, vuex, stylus, babel, pwa, eslint, unit-jest) // 這是我運行過之后的默認(rèn)設(shè)置横媚，第一次執(zhí)行create是沒有的
default (babel, eslint)
Manually select features
// 注：按鍵盤上下鍵選擇默認(rèn)（default）還是手動（Manually），
//如果選擇default，一路回車執(zhí)行下去就行了（注：現(xiàn)在vue-cli3.0默認(rèn)使用yarn下載）彤敛，這里我選擇手動笛求，
選擇特性支持
? 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)
>( ) 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 測試。
// 注意：你要集成什么就選就行了（注：空格鍵是選中與取消摄闸，A鍵是全選）
選擇css預(yù)處理善镰，這里我選擇stylus
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
> SCSS/SASS
LESS
Stylus
選擇ESLint + Prettier
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
選擇語法檢查方式，這里我選擇保存就檢測
Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? 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 // 保存就檢測
( ) Lint and fix on commit // fix和commit時候檢查
選擇單元測試
Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
Jest
她會問你 年枕，把babel,postcss,eslint這些配置文件放哪炫欺，這里隨便選，我選擇放在獨立文件夾
Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 獨立文件放置
In package.json // 放package.json里
鍵入N不記錄熏兄，如果鍵入Y需要輸入保存名字品洛，如第一步所看到的我保存的名字為xs-default
Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (Y/n) // 是否記錄一下以便下次繼續(xù)使用這套配置
vue.config.js完整默認(rèn)配置
如果想要修改端口號以及webpack配置，需要你在根目錄下面創(chuàng)建一個vue.config.js
module.exports = {
/** 區(qū)分打包環(huán)境與開發(fā)環(huán)境
* process.env.NODE_ENV==='production' (打包環(huán)境)
* process.env.NODE_ENV==='development' (開發(fā)環(huán)境)
* baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',
*/
// 基本路徑
baseUrl: '/',
// 輸出文件目錄
outputDir: 'dist',
// eslint-loader 是否在保存的時候檢查
lintOnSave: true,
// use the full build with in-browser compiler?
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
compiler: false,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
//如果想要引入babel-polyfill可以這樣寫
// configureWebpack: (config) => {
// config.entry = ["babel-polyfill", "./src/main.js"]
// },
// vue-loader 配置項
// https://vue-loader.vuejs.org/en/options.html
vueLoader: {},
// 生產(chǎn)環(huán)境是否生成 sourceMap 文件
productionSourceMap: true,
// css相關(guān)配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開啟 CSS source maps?
sourceMap: false,
// css預(yù)設(shè)器配置項
loaderOptions: {},
// 啟用 CSS modules for all css / pre-processor files.
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// 是否啟用dll
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
dll: false,
// PWA 插件相關(guān)配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相關(guān)配置
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null, // 設(shè)置代理
before: app => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}
