开始做Vue 2.0项目时可以使用Vue-cli工具，很方便快捷就可以初始化一个Vue 2.0 项目，但是初始化出来的项目有些配置并不是自己想要的，例如，想加一个全局的样式文件等等，默认的Vue项目是以单页组件形式来组织的，默认没有一个全局的样式文件，当然这些都是可以自己加的，不过，由于通用性的需要，用Vue-cli初始化出来的项目，webpack配置显得有点“多余”，再者每个开发人员的习惯都不同，所以就打算自己手动构建一个Vue2.0项目框架，后面工作或学习都可以作为母板快速使用。
一、项目构建配置需求
1、使用webpack配置和打包
2、实时开发调试
3、ES 6语法
4、ESLint语法检查
5、SCSS样式以及PostCSS配置自动添加浏览器兼容
6、加入一个全局样式文件（SCSS），并提取组件中的样式（SCSS），一起打包成CSS样式文件
7、图片优化处理（小于10K使用base64格式，大于10K使用文件资源形式）
8、代码打包分库文件和程序文件分别打包，库文件预设Vue/Vue-Router/axios三个库
9、开发模式和生产模式特别配置
二、项目构建配置
（一）初始化项目及安装依赖库
1、初始化项目
npm init
2、安装依赖库
（1）运行依赖库
axios/vue/vue-router
（2）开发依赖库
样式相关：autoprefixer/css-loader/style-loader/sass-loader/node-sass/postcss-loader/extract-text-webpack-plugin
ES6语法编译：babel-core/babel-loader/babel-plugin-transform-runtime/babel-preset-es2015/babel-preset-latest/babel-preset-stage-2
ESLint语法检查：eslint/babel-eslint/eslint-config-standard/eslint-loader/eslint-plugin-html/eslint-plugin-promise/eslint-plugin-standard
图片加载引用优化：file-loader/image-webpack-loader/url-loader
Vue相关：vue-loader/vue-style-loader/vue-template-compiler
开发打包配置：webpack/webpack-dev-server
3、配置开发调试和打包生产脚本
1
2
3
4
”scripts”: {
“server”: “webpack-dev-server”,
“build”: “set NODE_ENV=production&&webpack -p”
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
最后的package.json文件源码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
{
“name”: “vue-webpack-es6”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“server”: “webpack-dev-server”,
“build”: “set NODE_ENV=production&&webpack -p”
},
“author”: “ken”,
“license”: “ISC”,
“dependencies”: {
“axios”: “^0.15.3”,
“vue”: “^2.2.1”,
“vue-router”: “^2.3.0”
},
“devDependencies”: {
“autoprefixer”: “^6.7.5”,
“babel-core”: “^6.23.1”,
“babel-eslint”: “^7.1.1”,
“babel-loader”: “^6.3.2”,
“babel-plugin-transform-runtime”: “^6.23.0”,
“babel-preset-es2015”: “^6.22.0”,
“babel-preset-latest”: “^6.22.0”,
“babel-preset-stage-2”: “^6.22.0”,
“css-loader”: “^0.26.2”,
“eslint”: “^3.16.1”,
“eslint-config-standard”: “^6.2.1”,
“eslint-loader”: “^1.6.3”,
“eslint-plugin-html”: “^2.0.1”,
“eslint-plugin-promise”: “^3.4.2”,
“eslint-plugin-standard”: “^2.0.1”,
“extract-text-webpack-plugin”: “^2.0.0-rc.3”,
“file-loader”: “^0.10.1”,
“image-webpack-loader”: “^3.2.0”,
“node-sass”: “^4.5.0”,
“postcss-loader”: “^1.3.2”,
“sass-loader”: “^6.0.2”,
“style-loader”: “^0.13.2”,
“url-loader”: “^0.5.8”,
“vue-loader”: “^11.1.3”,
“vue-style-loader”: “^2.0.3”,
“vue-template-compiler”: “^2.2.1”,
“webpack”: “^2.2.1”,
“webpack-dev-server”: “^2.4.1”
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
package.json
（二）webpack配置及加载器配置
这是最关键的一步，webpack中配置了对项目各种资源和文件的处理，下面直接给出配置代码，关于webpack的配置和解析可以参考下面这两篇文章：
1、webpack配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
var path = require(“path”)
var webpack = require(“webpack”)
var ExtractTextPlugin = require(“extract-text-webpack-plugin”)
var extractSCSS = new ExtractTextPlugin({filename: ‘css/style.css’, disable: false, allChunks: true})
var PRODUCTION = process.env.NODE_ENV === ‘production’
var config = {
context: path.join(__dirname, “src”),
entry: {
app: [‘./css/style.scss’, ‘./main.js’],
vendor: [‘vue’, ‘vue-router’, ‘axios’]
},
output: {
path: path.join(__dirname, “src”),
filename: ‘bundle.js’,
publicPath: “/”
},
module: {
rules: [
{
test: /\.scss$/,</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> // use: ['style-loader', 'css-loader', 'sass-loader']</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> use: extractSCSS.extract({</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> fallback: "style-loader",</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> publicPath: "/",</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> use: ['css-loader', 'sass-loader', 'postcss-loader']</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> })</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> },</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> {</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> test: /\.(js|vue)$/,</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> loader: 'eslint-loader',</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> enforce: "pre",</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> include: path.join(__dirname, "src"),</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> exclude: /node_modules/</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> },</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> {</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> test: /\.vue$/,</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> loader: 'vue-loader',</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> include: path.join(__dirname, "src"),</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> exclude: /node_modules/,</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> options: {</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> loaders: {</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> scss: extractSCSS.extract({</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> use: ['css-loader', 'sass-loader', 'postcss-loader'],</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> fallback: 'style-loader'</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> })</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> }</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> }</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> },</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span><span class="ace_indent-guide"> </span> {</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span> test: /\.js$/,</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span> include: path.join(__dirname, "src"),</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span> exclude: /node_modules/,</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span> use: {</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span> loader: 'babel-loader'</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span> }</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span> },</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span> {</div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span> test: /\.(gif|png|jpe?g|svg)$/i,
use: [
{
loader: ‘url-loader’,
options: {
limit: 10000,
name: path.posix.join(‘assets’, ‘img/[name].[ext]’)
}
},
{
loader: ‘image-webpack-loader’,
query: {
mozjpeg: {
progressive: true
},
gifsicle: {
interlaced: false
},
optipng: {
optimizationLevel: 7
},
pngquant: {
quality: ‘60-80’,
speed: 4
}
}
}
],
exclude: /node_modules/,
include: __dirname
}
]
},
resolve: {
extensions: [“.webpack.js”, “.vue”, “.js”, “.css”, “.scss”]
},
plugins: [
extractSCSS,
new webpack.optimize.CommonsChunkPlugin({
name: ‘vendor’,
filename: ‘vendor.js’,
minChunks: Infinity
}),
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(process.env.NODE_ENV === ‘production’),
})
]
}
if(PRODUCTION){
console.log(‘production mode’)
config.plugins.push(
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
minimize: true,
compress: {
warnings: false
},
output: {
comments: false
}
})
)
}else{
console.log(‘development mode’)
config.plugins.push(
new webpack.HotModuleReplacementPlugin()
)
config.devtool = “#eval-source-map”
config.devServer = {
contentBase: path.join(__dirname, “src”),
compress: true,
port: 9999,
inline: true
}
}
module.exports = config
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
webpack.config.js
2、babel编译配置（参考vue-cli生成项目）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
“presets”: [
[“latest”, {
“es2015”: { “modules”: false }
}],
“stage-2”
],
“plugins”: [“transform-runtime”],
“comments”: false,
“env”: {
“test”: {
“presets”: [“latest”, “stage-2”],
“plugins”: [ “istanbul” ]
}
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
.babelrc
3、postcss配置
1
2
3
4
5
module.exports = {
plugins: [
require(‘autoprefixer’)({ /* …options */ })
]
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
.postcss.config.js
4、eslint配置（参考vue-cli生成项目中的标准eslint配置模式）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// http://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: ‘babel-eslint’,
parserOptions: {
sourceType: ‘module’
},
env: {
browser: true,
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: ‘standard’,
// required to lint *.vue files
plugins: [
‘html’
],
// add your custom rules here
‘rules’: {
// allow paren-less arrow functions
‘arrow-parens’: 0,
// allow async-await
‘generator-star-spacing’: 0,
// allow debugger during development
‘no-debugger’: process.env.NODE_ENV === ‘production’ ? 2 : 0
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
.eslintrc.js
（三）项目入口搭建
1、首页入口
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<meta http-equiv=”x-ua-compatible” content=”ie=edge”>
<title>vue-webpack-es6</title>
<meta name=”description” content=”“>
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
<link rel=stylesheet href=”css/style.css”>
</head>
<body>
<div id=”app”></div>
<s cript src=”vendor.js”></script>
<s cript src=”bundle.js”></script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
src/index.html
2、程序逻辑入口
1
2
3
4
5
6
7
8
import Vue from ‘vue’
import App from ‘./App’
/* eslint-disable no-new */
new Vue({
el: ‘#app’,
render: h => h(App)
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
src/main.js
3、根组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
<div id=”app”>
<img src=”./assets/logo.png”>
<hello></hello>
</div>
</template>
<s cript>
import Hello from ‘./components/Hello’
export default {
name: ‘app’,
components: {
Hello
}
}
</script>
<s tyle>
#app {
font-family: ‘Avenir’, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
src/App.vue
4、测试子组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
<div class=”hello”>
<h1>{{ msg }}</h1>
</div>
</template>
<s cript>
export default {
name: ‘hello’,
data () {
return {
msg: ‘Hello Vue.js!’
}
},
methods: {
}
}
</script>
<s tyle scoped lang=”scss”>
$color: #dd3333;</div><div class="ace_line" style="height:14px">h1 {</div><div class="ace_line" style="height:14px"> font-weight: normal;</div><div class="ace_line" style="height:14px"> color: $color;
}
</style>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
src/components/Hello.vue
5、全局样式文件
1
2
3
4
5
6
7
8
9
10
11
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
src/css/style.scss
至此，一个手动自定义的vue2.0项目构架已经搭建完成了。最后项目目录结构如下图：
在命令行下面进入项目文件夹，执行下面命令开启开发调试模式：
1
npm run server
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
执行下面命令打包生成文件：
1
npm run build
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
运行效果：
程序代码已托管至Github: https://github.com/yaoyonstudio/vue2-webpack-es6
本文完
</div><!-- .entry-content -->
<footer class="entry-meta">
<!-- tags -->
<div class="tagcloud" style="display: block;">
<a href="https://www.thatyou.cn/tag/vuejs/">VueJS</a>
</div>
<!-- end tags -->
</footer><!-- .entry-meta -->
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
