vue 一步一步学习 集成 ElementUI (四)

vue 一步一步学习 集成 ElementUI (四)

VUE 的 组件 ElementUI ,我们通过学习 ElementUI 来详细了解 Vue 组件的使用.

我们开始安装 element

cnpm i element-ui -S

cnpm i element-theme -g

报错 ,我们切换管理员命令符模式.

切换后可以正常使用:

cnpm i element-theme-chalk -D
cnpm i https://github.com/ElementUI/theme-chalk -D

et -i element-variables.scss

安装第三方插件:

cnpm install --save axios vuex --save
cnpm install --save qs --save
cnpm install requirejs --save
cnpm install eventsource-polyfill --save-dev
cnpm install node-sass sass-loader --save-dev
cnpm install babel-polyfill --save
cnpm install --save xlsx file-saver
cnpm install -D script-loader
cnpm install prettier@~1.12.0 --save-dev
cnpm install vue-print-nb --save

我们看看系统中那些参数被修改了.

增加了一个css 样式文件,
修改了 pageage.json文件:

黄色部分是增加的组件.

在入口文件main.js中引入babel-polyfill
import ‘babel-polyfill’

//自定义主题部分开始

cnpm i gulp-cli -g
cnpm install gulp
cnpm install gulp-clean-css
cnpm install gulp-css-wrap

在项目根目录下创建一个名为 gulpfile.js 的文件
// gulpfile.js
var path = require(‘path’)
var gulp = require(‘gulp’)
var cleanCSS = require(‘gulp-clean-css’)
var cssWrap = require(‘gulp-css-wrap’)
gulp.task(‘css-wrap’, function () {
return gulp.src(path.resolve(’./theme/index.css’))
/* 找需要添加命名空间的css文件，支持正则表达式 /
.pipe(cssWrap({
selector: ‘.custom-02abfd’ / 添加的命名空间 /
}))
.pipe(cleanCSS())
.pipe(gulp.dest(‘src/assets/css/theme/02abfd’)) / 存放的目录 */
})
执行

gulp css-wrap

生成theme文件夹下的主题名称

此时src/assets/css/theme/02abfd 文件夹下没有fonts文件夹，把生成主题时根目录下面的theme目录下面生成的fonts复制到此处即可

建立store文件存储主题状态 vuex/store.js
import Vue from ‘vue’
import Vuex from ‘vuex’

Vue.use(Vuex)

const store = new Vuex.Store({
state:{
themecolor:‘20a0ff’//默认为20a0ff
},
mutations:{
//更新主题颜色
setThemeColor(state,curcolor){
this.state.themecolor = curcolor;
}
}
});
export default store;

在main.js入口文件中引用
import store from ‘./vuex/store.js’;
import ‘./assets/css/theme/02abfd/index.css’;

在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
test: /.sass$/,
loaders: [‘style’, ‘css’, ‘sass’]
}

这时根目录下会产生element-variables.scss 更改primary的值， 命令行输入 et
编译完成之后在主目录下生成theme的文件夹（此文件下的fonts以后有用）
在main.js的入口文件中引入 这样主题文件就变换了 替换了默认的蓝色
import ‘…/theme/index.css’

//自定义主题部分结束