webpack1.x + ElementUI 初探-演道网
2016 年 12 月 21 日
1. 安装Vue2.0
注意：
- 保证npm版本是3.10.x 及以上，想省事的话就重新安装 nodejs 6.x 的版本
- 请事先配置国内npm镜像，以免安装失败，配置方法： 修改 ~/.npmrc 文件如下（ Windows用户最好用gitbash进行编辑 ）
|
1
2
3
|
registry=https://registry.npm.taobao.org
chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver
phantomjs_cdnurl=https://npm.taobao.org/dist/phantomjs
|
准备工作做好了之后 进行如下步骤
|
1
2
3
4
|
npm install vue–cli –g #安装脚手架
vue init webpack my–vue #安装 webpack 模板，my-vue 是项目名，自己定义 此命令会提示让你确认设置，一路回车就好了
cd my–vue #进入工程目录
npm install #安装依赖
|
vue init 会自动生成 npm 项目，并帮你写好 package.json
通过查看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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
“dependencies”: {
“vue”: “^2.1.0”
},
“devDependencies”: {
“autoprefixer”: “^6.4.0”,
“babel-core”: “^6.0.0”,
“babel-eslint”: “^7.0.0”,
“babel-loader”: “^6.0.0”,
“babel-plugin-transform-runtime”: “^6.0.0”,
“babel-preset-es2015”: “^6.0.0”,
“babel-preset-stage-2”: “^6.0.0”,
“babel-register”: “^6.0.0”,
“chai”: “^3.5.0”,
“chalk”: “^1.1.3”,
“chromedriver”: “^2.21.2”,
“connect-history-api-fallback”: “^1.1.0”,
“cross-spawn”: “^4.0.2”,
“css-loader”: “^0.25.0”,
“element-ui”: “^1.0.7”,
“eslint”: “^3.7.1”,
“eslint-config-standard”: “^6.1.0”,
“eslint-friendly-formatter”: “^2.0.5”,
“eslint-loader”: “^1.5.0”,
“eslint-plugin-html”: “^1.3.0”,
“eslint-plugin-promise”: “^3.4.0”,
“eslint-plugin-standard”: “^2.0.1”,
“eventsource-polyfill”: “^0.9.6”,
“express”: “^4.13.3”,
“extract-text-webpack-plugin”: “^1.0.1”,
“file-loader”: “^0.9.0”,
“function-bind”: “^1.0.2”,
“html-webpack-plugin”: “^2.8.1”,
“http-proxy-middleware”: “^0.17.2”,
“inject-loader”: “^2.0.1”,
“isparta-loader”: “^2.0.0”,
“json-loader”: “^0.5.4”,
“karma”: “^1.3.0”,
“karma-coverage”: “^1.1.1”,
“karma-mocha”: “^1.2.0”,
“karma-phantomjs-launcher”: “^1.0.0”,
“karma-sinon-chai”: “^1.2.0”,
“karma-sourcemap-loader”: “^0.3.7”,
“karma-spec-reporter”: “0.0.26”,
“karma-webpack”: “^1.7.0”,
“lolex”: “^1.4.0”,
“mocha”: “^3.1.0”,
“nightwatch”: “^0.9.8”,
“node-sass”: “^4.0.0”,
“opn”: “^4.0.2”,
“ora”: “^0.3.0”,
“phantomjs-prebuilt”: “^2.1.3”,
“postcss-loader”: “^1.2.1”,
“sass-loader”: “^4.1.0”,
“selenium-server”: “2.53.1”,
“semver”: “^5.3.0”,
“shelljs”: “^0.7.4”,
“sinon”: “^1.17.3”,
“sinon-chai”: “^2.8.0”,
“url-loader”: “^0.5.7”,
“vue-loader”: “^10.0.0”,
“vue-style-loader”: “^1.0.0”,
“vue-template-compiler”: “^2.1.0”,
“webpack”: “^1.13.2”,
“webpack-dev-middleware”: “^1.8.3”,
“webpack-hot-middleware”: “^2.12.2”,
“webpack-merge”: “^0.14.1”
}
|
注意：
如果你发现你的 webpack 版本是 2.x
那么你之前应该用了 vue init webpack-simple my-vue 命令
本篇文章就不再实用了
你可以使用 vue list 查看每种模板的描述，然后重新安装模板
执行下面的命令，稍等片刻，如果你看到了一个V字LOGO那么Vue2.0就已经准备妥当了。
|
1
|
npm run dev
|
2.安装 ElementUI
|
1
|
npm install element–ui —save–dev
|
官方网站链接 http://element.eleme.io/#/zh-CN/component/installation
默认主题的样式文件挺大的，压缩后 110K 左右
所以官方文档中推荐了一个按需加载的 babel 插件，在引用指定组件的同时，还能够把组件相应的 css 文件 import 进来
官方文档的示例配置都是基于 webpack2.0 的，webpack1.x 的配置如下
|
1
2
3
4
5
6
7
8
9
10
11
12
|
{
“presets”: [“es2015”, “stage-2”],
“plugins”: [“transform-runtime”,
[“component”, [
{
“libraryName”: “element-ui”,
“styleLibraryName”: “theme-default”
}
]]
],
“comments”: false
}
|
CSS 文件增加前缀
比较坑的是，这些组件的 css 的浏览器兼容性并不好，所以需要通过 autoprefixer 加工一下
找到 build/webpack.base.conf 文件
将 vue 下的 postcss项，提到外面，并设置兼容更低的浏览器版本
|
1
2
3
4
5
6
7
8
9
10
|
...
postcss: [
require(‘autoprefixer’)({
browsers: [“Chrome >= 1”,“Safari >= 1”,“Firefox >= 1”,“ie >= 8”] // 粗暴一点
})
],
vue: {
loaders: utils.cssLoaders({ sourceMap: useCssSourceMap })
}
...
|
找到 build/utils.js 文件的 cssLoaders 方法
给使用到的文件类型 加一个 postcss 加载器，如果没有就不要加
|
1
2
3
4
5
6
7
8
9
|
...
return {
css: generateLoaders([‘css’,‘postcss’]), // 项目中使用到的文件匹配规则 多加一个 postcss 加载器
less: generateLoaders([‘css’, ‘less’]),
sass: generateLoaders([‘css’, ‘sass’, ‘postcss’]),// 项目中如果使用到了 sass 多加一个 postcss 加载器
scss: generateLoaders([‘css’, ‘sass’, ‘postcss’]),// 项目中如果使用到了 scss 多加一个 postcss 加载器
stylus: generateLoaders([‘css’, ‘stylus’]),
styl: generateLoaders([‘css’, ‘stylus’])
}
|
保存之后，使用命令安装这些加载器，项目初始化时并没有安装，需要手动执行
|
1
2
|
npm install postcss–loader —save–dev
npm install sass–loader —save–dev
|
CSS 文件分离
引入的组件css文件会打包到 js 文件中，并在执行js时动态加载到 标签内，产生很多内联样式标签