Vue.js+vue-element搭建屬於自己的后台管理模板：創建一個項目（四）
前言
本章主要講解通過Vue CLI 腳手架構建工具創建一個項目，在學習Vue CLI之前我們需要先了解下webpack 代碼編譯工具，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。
webpack
官方中文文檔地址：
https://www.webpackjs.com/concepts/
Vue CLI 腳手架構建工具
Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統，搭建交互式的項目腳手架，Vue CLI版本3.x開始包名稱由vue-cli 改成了 @vue/cli， 如果你已經全局安裝了舊版本的 vue-cli (1.x 或 2.x)，你需要先通過 npm uninstall vue-cli -g 卸載后再安裝3.x版本，Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。
安裝Vue CLI
在命令行輸入：cnpm install -g @vue/cli （安裝新包）
我們這里推薦用vue-cli 3.x構建項目，新版優化了編譯速度，不過你也可以通過老版本創建項目，老版本安裝命令：cnpm install --global vue-cli
備注：安裝后，檢查是否安裝成功 。vue -V (在此注意V為大寫，也可以用vue --version)
創建一個項目
運行以下命令來創建一個新項目：
vue create hello-world
項目構建完成后，會在當前目錄下創建hello-world項目文件夾。
$ cd hello-world
$ npm run serve
第一項為默認創建項目，默認的設置非常適合快速創建一個新項目的原型，這里我們選擇第二項手動創建項目，按回車繼續。
手動設置則提供了更多的選項，通過上下鍵選擇所需的包按空格鍵選中后，按回車繼續創建項目。
創建完成后我們進入hello-world目錄，輸入npm run serve運行項目（老版本運行命令為npm run dev）。
看到以上提示說明項目成功創建運行了，現在可以通過瀏覽器打開http://localhost:8080來訪問我們網站了。
打開項目
我們通過Visual Studio Code工具打開項目，文件 - 打開文件夾，選中我們創建的項目hello-world
目錄結構：
├── public # 靜態資源
│ │── favicon.ico # favicon圖標
│ └── index.html # html模板
├── src # 源代碼
│ ├── assets # 主題 字體等靜態資源
│ ├── components # 全局公用組件
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── views # views 所有頁面
│ ├── App.vue # 入口頁面
│ └── main.js # 入口文件 加載組件 初始化等
├──.browserslistrc # 瀏覽器兼容性
├── .eslintrc.js # eslint 配置項
├── babel.config.js # babel 配置項
└── package.json # package.json
package.json
每個項目的根目錄下面，一般都有一個package.json文件，定義了這個項目所需要的各種模塊，以及項目的配置信息。
{ "name": "hello-world", //npm包名稱 "version": "0.1.0", //npm包版本 "description": "h-gx前端UI框架", //npm包描述 "author": "h_gxi@foxmail.com", //作者 "license": "ISC", //開源許可說明 "main": "main.js", "scripts": { //腳本命令 "serve": "vue-cli-service serve", //運行項目 "build": "vue-cli-service build", //編譯打包 "lint": "vue-cli-service lint" // }, "dependencies": { //生產環境 請不要將測試或過渡性的依賴放到dependencies中 "core-js": "^3.3.2", "element-ui": "^2.12.0", "vue": "^2.6.10" }, "devDependencies": { //開發環境 "@vue/cli-plugin-babel": "^4.0.0", "@vue/cli-plugin-eslint": "^4.0.0", "@vue/cli-service": "^4.0.0", "babel-eslint": "^10.0.3", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.0.0", "node-sass": "^4.13.0", "sass-loader": "^8.0.0", "uglifyjs-webpack-plugin": "^2.2.0", "vue-template-compiler": "^2.6.10" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions" ] }
vue.config.js
vue.config.js 是一個可選的配置文件，如果項目的 (和 package.json 同級的) 根目錄中存在這個文件，那么它會被 @vue/cli-service 自動加載。
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isDev = process.env.NODE_ENV === 'development' // 開發環境
// 打包輸出路徑
const outputDir = 'dist'
module.exports = {
outputDir: outputDir,
// 部署應用包時的基本 URL
publicPath: '/',
// 端口
devServer: {
port: 6220
},
// 默認情況下 babel-loader 會忽略所有 node_modules 中的文件。如果你想要通過 Babel 顯式轉譯一個依賴，可以在這個選項中列出來。
transpileDependencies: ['element-ui'],
// false生產環境下不打包map文件，true時可以看到所有源碼。
productionSourceMap: false,
// 如果這個值是一個對象，則會通過 webpack-merge 合並到最終的配置中。
configureWebpack: {
plugins: [
/**
* 復制nm-lib-skins/public目錄下的文件到輸出目錄
*/
new CopyWebpackPlugin([
{
from: path.join(__dirname, 'public'),
to: path.join(__dirname, outputDir),
ignore: ['index.html']
}
])
]
},
// 是一個函數，會接收一個基於 webpack-chain 的 ChainableConfig 實例。允許對內部的 webpack 配置進行更細粒度的修改。
chainWebpack: config => {
/**
* 刪除懶加載模塊的 prefetch preload，降低帶寬壓力
* https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch
* https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload
* 而且預渲染時生成的 prefetch 標簽是 modern 版本的，低版本瀏覽器是不需要的
*/
config.plugins.delete('prefetch').delete('preload')
/**
* 設置index.html模板路徑，默認public中的模板
*/
config.plugin('html').tap(args => {
args[0].template = './public/index.html'
return args
})
config
// 開發環境
.when(
isDev,
// 轉換過的代碼（僅限行） https://webpack.docschina.org/configuration/devtool/
config => config.devtool('cheap-source-map')
)
// 非開發環境
.when(!isDev, config => {
config.optimization.minimizer([
new UglifyJsPlugin({
uglifyOptions: {
// 移除 console
// 其它優化選項 https://segmentfault.com/a/1190000010874406
warnings: false,
compress: {
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log']
}
}
})
])
// 拆分
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
elementUI: {
name: 'chunk-element-ui',
priority: 20,
test: /[\\/]node_modules[\\/]element-ui(.*)/
}
}
})
config.optimization.runtimeChunk({
name: 'manifest'
})
})
}
}
cnpm install uglifyjs-webpack-plugin --save-dev
cnpm install -D sass-loader node-sass
cnpm i element-ui -S
目錄導航
- Vue.js+vue-element搭建屬於自己的后台管理模板：什么是Vue.js?（一）
- Vue.js+vue-element搭建屬於自己的后台管理模板：Vue.js快速入門（二）
- Vue.js+vue-element搭建屬於自己的后台管理模板：更深入了解Vue.js（三）
- Vue.js+vue-element搭建屬於自己的后台管理模板：創建一個項目（四）
參考資料
Vue.js