vue-cli(vue腳手架)專案搭建
vue構建
用 vue-cli
快速構建一個工程的時候,除了學習官方文件外,需要熟練掌握es6,還有vue
的全家桶(vue-cli
vue腳手架, vue-router
前端路由, axios
請求資料, vuex
應用程式開發的狀態管理模式)都要上的。
vue-cli: vue腳手架,支援熱更新
vue-router: Vue官方的路由管理器。
axios: 請求資料。
vuex: Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。
Vue.js全家桶系列, 包括
vue-cli
,vue-router
,axios
,vuex
安裝vue-cli
1, 需要全域性安裝webpack
npm install -g webpack //安裝成功後輸入`webpack -v`出現版本號
npm install webpack webpack-cli -g //安裝 webpack-cli 依賴
2, 全域性安裝vue-cli
sudo npm install --global vue-cli //安裝完成之後輸入 `vue -V`出現相應的版本號
用vue-cli構建專案
1, 新建專案資料夾(TodoList),cd TodoList
進入TodoList
專案資料夾,
2,構建vue專案
vue init webpack todo_list //todo_list是自定義的專案名稱
輸入命令後,選項說明:
- ? Project name todo_list: 專案名稱,直接回車,按照括號中預設名字(注意這裡的名字不能有大寫字母,如果有會報錯Sorry, name can no longer contain capital letters)
- ? Project description A Vue.js project: 專案描述,也可直接點選回車,使用預設名字
- ? Vue build standalone:
- ? Install vue-router? Yes: 是否安裝vue-router,這是官方的路由,大多數情況下都使用,這裡就輸入“y”後回車即可。
- ? Use ESLint to lint your code? Yes: 是否使用ESLint管理程式碼,ESLint是個程式碼風格管理工具,是用來統一程式碼風格的,一般專案中都會使用。
- ? Pick an ESLint preset Standard: 接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設,編寫vue專案時的程式碼風格,直接y回車
- ? Set up unit tests Yes: 是否安裝單元測試,我選擇安裝y回車
- ? Pick a test runner jest
- ? Setup e2e tests with Nightwatch? Yes: 是否安裝e2e測試 ,我選擇安裝y回車
- ? Should we run
npm install
for you after the project has been created? (recom
mended) npm:
3,配置完成後,專案目錄下出現專案檔案,進入專案資料夾
安裝依賴
npm install //目錄中`node_modules`文件夾,放所有依賴的模組。
4, 解釋一下每個資料夾
build //構建腳步目錄,儲存一些webpack的初始化配置
config //構建配置目錄,專案初始化的配置,包括埠號等
node_modules //npm載入的專案依賴的模組
src //原始碼目錄,這裡是我們要開發的目錄,基本上要做的事情都在這個目錄裡
- assets //資源目錄,用來放置圖片,如logo等
- components //元件目錄,用來放元件檔案
- router //
- app.vue //是專案入口檔案
- main.js //是專案的核心檔案
static //資料夾用來放置靜態資源目錄,如圖片、字型等。
test //初始測試目錄,可刪除
.babelrc babel //編譯引數,vue開發需要babel編譯
.gitignore //用來過濾一些版本控制的檔案,比如node_modules資料夾
index.html //是首頁入口檔案,你可以新增一些 meta 資訊或統計程式碼啥。
package.json //是專案配置檔案,記載著一些命令和依賴還有簡要的專案描述資訊
README.md //專案的說明文件,markdown 格式,介紹自己這個專案的
啟動專案
npm run dev
如果瀏覽器開啟之後,沒有加載出頁面,有可能是本地的 8080 埠被佔用,需要修改一下配置檔案 config裡的index.js
如果本地除錯專案時,建議將build 裡的assetsPublicPath的路徑字首修改為 ’ ./ ‘(開始是 ’ / ‘),因為打包之後,外部引入 js 和 css 檔案時,如果路徑以 ’ / ’ 開頭,在本地是無法找到對應檔案的(伺服器上沒問題)。所以如果需要在本地開啟打包後的檔案,就得修改檔案路徑。
在進行vue頁面除錯時,一定要去谷歌商店下載一個vue-tool擴充套件程式。
vue-cli的webpack配置分析
入口
在 package.json
可以看到開發和生產環境的入口。
dev
中的設定,build/webpack.dev.conf.js
,該檔案是開發環境中webpack的配置入口。- 在webpack.dev.conf.js中出現webpack.base.conf.js,這個檔案是開發環境和生產環境,甚至測試環境,這些環境的公共webpack配置。可以說,這個檔案相當重要。
開發環境
開發環境的入口檔案是 build/
build/webpack.dev.conf.js
dev-server.js
中使用了webpack.dev.conf.js
檔案,該檔案是開發環境中webpack的配置入口。
// 工具函式集合
var utils = require('./utils')
var webpack = require('webpack')
// 配置檔案
var config = require('../config')
// webpack 配置合併外掛
var merge = require('webpack-merge')
// webpac基本配置
var baseWebpackConfig = require('./webpack.base.conf')
// 自動生成 html 並且注入到 .html 檔案中的外掛
// https://github.com/ampedandwired/html-webpack-plugin
var HtmlWebpackPlugin = require('html-webpack-plugin')
// webpack錯誤資訊提示外掛
// https://github.com/geowarin/friendly-errors-webpack-plugin
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// 將 Hol-reload 熱過載的客戶端程式碼新增到 webpack.base.conf 的 對應 entry 中,一起打包
Object.keys(baseWebpackConfig.entry).forEach(function(name) {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports = merge(baseWebpackConfig, {
module: {
// styleLoaders
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// 最新的配置為 cheap-module-eval-source-map,雖然 cheap-module-eval-source-map更快,但它的定位不準確
// 所以,換成 eval-source-map
devtool: '#eval-source-map',
plugins: [
// definePlugin 接收字串插入到程式碼當中, 所以你需要的話可以寫上 JS 的字串
// 此處,插入適當的環境
// https://webpack.js.org/plugins/define-plugin/
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// HotModule 外掛在頁面進行變更的時候只會重繪對應的頁面模組,不會重繪整個 html 檔案
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// 將 index.html 作為入口,注入 html 程式碼後生成 index.html檔案
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// webpack錯誤資訊提示外掛
new FriendlyErrorsPlugin()
]
})
build/webpack.base.conf.js
在webpack.dev.conf.js
中出現webpack.base.conf.js
,這個檔案是開發環境和生產環境,甚至測試環境,這些環境的公共webpack配置。可以說,這個檔案相當重要。
// node自帶的檔案路徑工具
var path = require('path')
// 工具函式集合
var utils = require('./utils')
// 配置檔案
var config = require('../config')
// 工具函式集合
var vueLoaderConfig = require('./vue-loader.conf')
/**
* 獲得絕對路徑
* @method resolve
* @param {String} dir 相對於本檔案的路徑
* @return {String} 絕對路徑
*/
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './src/main.js'
},
output: {
// 編譯輸出的靜態資源根路徑
path: config.build.assetsRoot,
// 編譯輸出的檔名
filename: '[name].js',
// 正式釋出環境下編譯輸出的上線路徑的根路徑
publicPath: process.env.NODE_ENV === 'production' ?
config.build.assetsPublicPath : config.dev.assetsPublicPath
},
resolve: {
// 自動補全的副檔名
extensions: ['.js', '.vue', '.json'],
// 路徑別名
alias: {
// 例如 import Vue from 'vue',會自動到 'vue/dist/vue.common.js'中尋找
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [{
// 審查 js 和 vue 檔案
// https://github.com/MoOx/eslint-loader
test: /\.(js|vue)$/,
loader: 'eslint-loader',
// 表示預先處理
enforce: "pre",
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
// 處理 vue檔案
// https://github.com/vuejs/vue-loader
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
// 編譯 js
// https://github.com/babel/babel-loader
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
// 處理圖片檔案
// https://github.com/webpack-contrib/url-loader
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
// 處理字型檔案
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
build/utils.js'
utils.js
也是一個被使用頻率的檔案,這個檔案包含了三個工具函式:
config/index.js`
- 生成靜態資源的路徑
- 生成 ExtractTextPlugin物件或loader字串
- 生成 style-loader的配置
// node自帶的檔案路徑工具
var path = require('path')
// 配置檔案
var config = require('../config')
// 提取css的外掛
// https://github.com/webpack-contrib/extract-text-webpack-plugin
var ExtractTextPlugin = require('extract-text-webpack-plugin')
/**
* 生成靜態資源的路徑
* @method assertsPath
* @param {String} _path 相對於靜態資原始檔夾的檔案路徑
* @return {String} 靜態資源完整路徑
*/
exports.assetsPath = function (_path) {
var assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
// path.posix.join與path.join一樣,不過總是以 posix 相容的方式互動
return path.posix.join(assetsSubDirectory, _path)
}
/**
* 生成處理css的loaders配置
* @method cssLoaders
* @param {Object} options 生成配置
* option = {
* // 是否開啟 sourceMap
* sourceMap: true,
* // 是否提取css
* extract: true
* }
* @return {Object} 處理css的loaders配置物件
*/
exports.cssLoaders = function (options) {
options = options || {}
var cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
/**
* 生成 ExtractTextPlugin物件或loader字串
* @method generateLoaders
* @param {Array} loaders loader名稱陣列
* @return {String|Object} ExtractTextPlugin物件或loader字串
*/
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader]
if (loader) {
loaders.push({
// 例如,sass?indentedSyntax
// 在?號前加上“-loader”
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// extract為true時,提取css
// 生產環境中,預設為true
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
/**
* 生成 style-loader的配置
* style-loader文件:https://github.com/webpack/style-loader
* @method styleLoaders
* @param {Object} options 生成配置
* option = {
* // 是否開啟 sourceMap
* sourceMap: true,
* // 是否提取css
* extract: true
* }
* @return {Array} style-loader的配置
*/
exports.styleLoaders = function (options) {
var output = []
var loaders = exports.cssLoaders(options)
for (var extension in loaders) {
var loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
config
config/index.js
該檔案在很多檔案中都用到,是主要的配置檔案,包含靜態檔案的路徑、是否開啟sourceMap等。其中,分為兩個部分dev
(開發環境的配置)和build
(生產環境的配置)。
// 詳情見文件:https://vuejs-templates.github.io/webpack/env.html
var path = require('path')
module.exports = {
// production 生產環境
build: {
// 構建環境
env: require('./prod.env'),
// 構建輸出的index.html檔案
index: path.resolve(__dirname, '../dist/index.html'),
// 構建輸出的靜態資源路徑
assetsRoot: path.resolve(__dirname, '../dist'),
// 構建輸出的二級目錄
assetsSubDirectory: 'static',
// 構建釋出的根目錄,可配置為資源伺服器域名或 CDN 域名
assetsPublicPath: '/',
// 是否開啟 cssSourceMap
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
// 預設關閉 gzip,因為很多流行的靜態資源主機,例如 Surge、Netlify,已經為所有靜態資源開啟gzip
productionGzip: false,
// 需要使用 gzip 壓縮的副檔名
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
// 執行“build”命令列時,加上一個引數,可以在構建完成後參看包分析報告
// true為開啟,false為關閉
bundleAnalyzerReport: process.env.npm_config_report
},
// dev 開發環境
dev: {
// 構建環境
env: require('./dev.env'),
// 埠號
port: 3333,
// 是否自動開啟瀏覽器
autoOpenBrowser: true,
assetsSubDirectory: 'static',
// 編譯釋出的根目錄,可配置為資源伺服器域名或 CDN 域名
assetsPublicPath: '/',
// proxyTable 代理的介面(可跨域)
// 使用方法:https://vuejs-templates.github.io/webpack/proxy.html
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
// 預設情況下,關閉 CSS Sourcemaps,因為使用相對路徑會報錯。
// CSS-Loader README:https://github.com/webpack/css-loader#sourcemaps
cssSourceMap: false
}
}
生產環境
開發環境的入口檔案是build/build.js
build.js
該檔案,為構建打包檔案,會將原始碼進行構建(編譯、壓縮等)後打包。
// 設定當前環境為生產環境
process.env.NODE_ENV = 'production'
// loading 外掛
// https://github.com/sindresorhus/ora
var ora = require('ora')
// 可以在 node 中執行`rm -rf`的工具
// https://github.com/isaacs/rimraf
var rm = require('rimraf')
// node自帶的檔案路徑工具
var path = require('path')
// 在終端輸出帶顏色的文字
// https://github.com/chalk/chalk
var chalk = require('chalk')
var webpack = require('webpack')
// 配置檔案
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')
// 在終端顯示loading效果,並輸出提示
var spinner = ora('building for production...')
spinner.start()
// 刪除這個資料夾 (遞迴刪除)
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
// 構建
webpack(webpackConfig, function (err, stats) {
// 構建成功
// 停止 loading動畫
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n')
// 列印提示
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})
build/webpack.prod.conf
該檔案,為生產環境中webpack的配置入口。同時,它也依賴於前面提到的webpack.base.conf.js、utils.js和config/index.js。
// node自帶的檔案路徑工具
var path = require('path')
// 工具函式集合
var utils = require('./utils')
var webpack = require('webpack')
// 配置檔案
var config = require('../config')
// webpack 配置合併外掛
var merge = require('webpack-merge')
// webpack 基本配置
var baseWebpackConfig = require('./webpack.base.conf')
// webpack 複製檔案和資料夾的外掛
// https://github.com/kevlened/copy-webpack-plugin
var CopyWebpackPlugin = require('copy-webpack-plugin')
// 自動生成 html 並且注入到 .html 檔案中的外掛
// https://github.com/ampedandwired/html-webpack-plugin
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 提取css的外掛
// https://github.com/webpack-contrib/extract-text-webpack-plugin
var ExtractTextPlugin = require('extract-text-webpack-plugin')
// webpack 優化壓縮和優化 css 的外掛
// https://github.com/NMFR/optimize-css-assets-webpack-plugin
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
// 如果當前環境為測試環境,則使用測試環境
// 否則,使用生產環境
var env = process.env.NODE_ENV === 'testing'
? require('../config/test.env')
: config.build.env
var webpackConfig = merge(baseWebpackConfig, {
module: {
// styleLoaders
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
},
// 是否開啟 sourceMap
devtool: config.build.productionSourceMap ? '#source-map' : false,
output: {
// 編譯輸出的靜態資源根路徑
path: config.build.assetsRoot,
// 編譯輸出的檔名
filename: utils.assetsPath('js/[name].[chunkhash].js'),
// 沒有指定輸出名的檔案輸出的檔名
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// definePlugin 接收字串插入到程式碼當中, 所以你需要的話可以寫上 JS 的字串
// 此處,插入適當的環境
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
// 壓縮 js
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: true
}),
// 提取 css
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
// 壓縮提取出來的 css
// 可以刪除來自不同元件的冗餘程式碼
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin(),
// 將 index.html 作為入口,注入 html 程式碼後生成 index.html檔案
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// 更多選項 https://github.com/kangax/html-minifier#options-quick-reference
},
// 必須通過 CommonsChunkPlugin一致地處理多個 chunks
chunksSortMode: 'dependency'
}),
// 分割公共 js 到獨立的檔案
// https://webpack.js.org/guides/code-splitting-libraries/#commonschunkplugin
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module, count) {
// node_modules中的任何所需模組都提取到vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// 將webpack runtime 和模組清單 提取到獨立的檔案,以防止當 app包更新時導致公共 jsd hash也更新
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
}),
// 複製靜態資源
// https://github.com/kevlened/copy-webpack-plugin
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
// 開啟 gzip 的情況時,給 webpack plugins新增 compression-webpack-plugin 外掛
if (config.build.productionGzip) {
// webpack 壓縮外掛
// https://github.com/webpack-contrib/compression-webpack-plugin
var CompressionWebpackPlugin = require('compression-webpack-plugin')
// 向webpackconfig.plugins中加入下方的外掛
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
// 開啟包分析的情況時, 給 webpack plugins新增 webpack-bundle-analyzer 外掛
if (config.build.bundleAnalyzerReport) {
// https://github.com/th0r/webpack-bundle-analyzer
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig
打包上線
自己的專案檔案都需要放到 src 資料夾下。
在專案開發完成之後,可以輸入 npm run build
來進行打包工作。
npm run build
打包完成後,會生成 dist
資料夾,如果已經修改了檔案路徑,可以直接開啟本地檔案檢視。
專案上線時,只需要將 dist
資料夾放到伺服器就行了。