vue构建
使用vue-cli作为Vue应用程序和组件的零配置开发工具,查看Vue CLI 的文档。
vue-cli github仓库;
用 vue-cli 快速构建一个工程的时候,除了学习官方文档外,需要熟练掌握es6,还有vue的全家桶(vue-clivue脚手架, 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: 项目描述,也可直接点击回车,使用默认名字
? Author galen galen@git.xgqq.com: 作者,输入你的大名
? 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
vue-cli webpack配置的分析(注释)可参考vue-cli-webpack-analysis
打包上线
自己的项目文件都需要放到 src 文件夹下。
在项目开发完成之后,可以输入 npm run build 来进行打包工作。
npm run build
1
打包完成后,会生成 dist文件夹,如果已经修改了文件路径,可以直接打开本地文件查看。
项目上线时,只需要将 dist 文件夹放到服务器就行了。
---------------------
作者:gqzydh
来源:CSDN
原文:https://blog.csdn.net/gqzydh/article/details/80912889
版权声明:本文为博主原创文章,转载请附上博文链接!