簡單搭建vue-cli3、vue-cli4項目

vue cli官網https://cli.vuejs.org/zh/guide/webpack.html#

下載安裝環境
1、下載node（https://nodejs.org/zh-cn/download/）

node --version//查看node版本
npm --version//查看npm版本

2、已安裝過vue-cli2的話，得先卸載掉

npm uninstall vue-cli -g
或
yarn global remove vue-cli

3、全局安裝

npm install -g @vue/cli 
或 
yarn global add @vue/cli

4、查看是否安裝成功 vue -V

創建項目的三種方式

//1、（1.x 和 2.x 采用 init 命令創建項目）

vue init webpack my-project

//2、視圖創建（3.x采用方式，新增了圖形化的方式來創建項目,瀏覽器會打開一個頁面，可以按照頁面將的引導創建項目）

vue ui

//3.（3.x采用方式）

vue create my-project

創建項目

npm install @vue/cli -g //全局安裝最新的腳手架
vue create my-project //創建新項目
//選擇自定義配置 （ 默認配置default、 手動配置Manually select features）
//選擇你需要的配置
Babel (必選)
TypeScript（項目中使用ts開發的話，就勾選）
Progressive Web App (PWA) Support (接口緩存，優化項目)
Router
Vuex 
CSS Pre-processors (css預處理器，需要)
Linter / Formatter (代碼格式，一般默認選中)
Unit Testing (代碼測試)
E2E Testing（需求界面測試）
根據你選的配置進行Y/N選擇，選擇完之后，就可以運行項目 
cd my-project // 進入到項目根目錄
npm run dev
// 啟動項目（默認是npm run serve ）我在package.json改過配置，"scripts": { "dev": "vue-cli-service serve --mode dev","prod": "vue-cli-service build --mode prod","test": "vue-cli-service build --mode test","lint": "vue-cli-service lint"},

vue-cli 3、4 與 2 版本有很大區別

vue-cli 3、4目錄比2簡潔了很多，沒了build和config等目錄
vue-cli 3、4的github 倉庫由原有獨立的 github 倉庫遷移到了 vue 項目下
vue-cli 3、4項目架構完全拋棄了 vue-cli 2 的原有架構，3、4 的設計更加抽象和簡潔
vue-cli 3、4是基於 webpack 4 打造，vue-cli 2 還是 webapck 3
vue-cli 3、4設計原則是“0配置”
vue-cli 3、4提供了 vue ui 命令，提供了可視化配置，更加人性化

完善配置

1、package.json

{
"name": "my-project",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vue-cli-service serve --mode dev",
"prod": "vue-cli-service build --mode prod",
"test": "vue-cli-service build --mode test",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.4",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.2.0",
"@vue/cli-plugin-eslint": "~4.2.0",
"@vue/cli-service": "~4.2.0",
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}

2、在根目錄下面創建vue.config.js

#vue.config.js
module.exports = {
baseUrl: process.env.NODE_ENV === 'production'
? '//your_url'
: '/',

outputDir: 'dist',

assetsDir: 'static',

filenameHashing: true,

// When building in multi-pages mode, the webpack config will contain different plugins
// (there will be multiple instances of html-webpack-plugin and preload-webpack-plugin).
// Make sure to run vue inspect if you are trying to modify the options for those plugins.
pages: {
index: {
// entry for the pages
entry: 'src/pages/index/index.js',
// the source template
template: 'src/pages/index/index.html',
// output as dist/index.html
filename: 'index.html',
// when using title option,
// template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
title: '首頁',
// chunks to include on this pages, by default includes
// extracted common chunks and vendor chunks.
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
// when using the entry-only string format,
// template is inferred to be `public/subpage.html`
// and falls back to `public/index.html` if not found.
// Output filename is inferred to be `subpage.html`.
// subpage: ''
},

// eslint-loader 是否在保存的時候檢查
lintOnSave: true,

// 是否使用包含運行時編譯器的Vue核心的構建
runtimeCompiler: false,

// 默認情況下 babel-loader 忽略其中的所有文件 node_modules
transpileDependencies: [],

// 生產環境 sourceMap
productionSourceMap: false,

// cors 相關 https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors
// corsUseCredentials: false,
// webpack 配置，鍵值對象時會合並配置，為方法時會改寫配置
// https://cli.vuejs.org/guide/webpack.html#simple-configuration
configureWebpack: (config) => {
},

// webpack 鏈接 API，用於生成和修改 webapck 配置
// https://github.com/mozilla-neutrino/webpack-chain
chainWebpack: (config) => {
// 因為是多頁面，所以取消 chunks，每個頁面只對應一個單獨的 JS / CSS
config.optimization
.splitChunks({
cacheGroups: {}
});

// 'src/lib' 目錄下為外部庫文件，不參與 eslint 檢測
config.module
.rule('eslint')
.exclude
.add('/Users/maybexia/Downloads/FE/community_built-in/src/lib')
.end()
},

// 配置高於chainWebpack中關於 css loader 的配置
css: {
// 是否開啟支持 foo.module.css 樣式
modules: false,

// 是否使用 css 分離插件 ExtractTextPlugin，采用獨立樣式文件載入，不采用 <style> 方式內聯至 html 文件中
extract: true,

// 是否構建樣式地圖，false 將提高構建速度
sourceMap: false,

// css預設器配置項
loaderOptions: {
css: {
// options here will be passed to css-loader
},

postcss: {
// options here will be passed to postcss-loader
}
}
},

// All options for webpack-dev-server are supported
// https://webpack.js.org/configuration/dev-server/
devServer: {
open: true,

host: '127.0.0.1',

port: 3000,

https: false,

hotOnly: false,

proxy: null,

before: app => {
}
},
// 構建時開啟多進程處理 babel 編譯
parallel: require('os').cpus().length > 1,

// https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},

// 第三方插件配置
pluginOptions: {}
};

查看配置信息

vue inspect > output.js //根目錄下生成output.js， webpack 配置信息，不用去看 cli-service 源碼

3、在根目錄下面創建.env、.env.dev、.env.prod、.env.test
.env 全局默認配置文件，不論什么環境都會加載合並
.env.dev 開發環境下的配置文件
.env.prod 生產環境下的配置文件
.env.test 測試環境下的配置文件
*只支持：VUE_APP_ 開頭，比如設置變量 VUE_APP_NAME=11,在main.js輸出console.log(process.env);控制台看到如下信息：

.env

VUE_APP_NAME=11

.env.dev

VUE_APP_US=22

.env.prod

VUE_APP_US=44

.env.test

VUE_APP_US=33

 4、在 package.json 的 scripts 命令中添加對應的 mode

"scripts": {
    "dev": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode prod",
    "build:test": "vue-cli-service build --mode test"
  },

webpack相關配置

查看https://cli.vuejs.org/zh/guide/webpack.html#

完善
1、安裝預處理器

# Sass
npm install -D sass-loader node-sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus