1. 安装elementui 和sass npm i element-ui -S npm install --save-dev sass-loader npm install --save-dev node-sass 2. 在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } 3. 安装elementui的自定义主题工具 npm i element-theme -g npm i element-theme-chalk -D 4. 初始化变量文件 et -i element-variables.scss 5.这时根目录下会产生element-variables.scss 6.编译主题 更改primary的值， 命令行输入et 7.编译完成之后在主目录下生成theme的文件夹（此文件下的fonts以后有用） 8.在main.js的入口文件中引入 import '../theme/index.css' 9.使用gulp-css-wrap神器 npm install gulp npm install gulp-clean-css npm install gulp-css-wrap 10.在项目根目录下创建一个名为 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')) /* 存放的目录 */ }) custom-02abfd中的02abfd即为刚才生成自定义主题时的颜色 11.执行gulp输出 gulp css-wrap 12.生成theme文件夹下的主题名称 此时文件夹下没有fonts文件夹，把生成主题时生成的fonts复制到此处即可 13.建立store文件存储主题状态 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'; 14.在颜色切换页面 Element-UI 饿了么推出的基于Vue.js的桌面端UI框架。 手机端 Mint UI。 vue init webpack project-name //创建一个基于webpack模板的名为project-name的项目 可以的模板有: browserify–全功能的Browserify + vueify，包括热加载，静态检测，单元测试。 browserify-simple–一个简易的Browserify + vueify，以便于快速开始。 webpack–全功能的Webpack + vueify，包括热加载，静态检测，单元测试。 webpack-simple–一个简易的Webpack + vueify，以便于快速开始。 ?所谓vueify,就是使用.vue格式的文件定义组件,一个.vue文件就是一个组件 npm install 安装项目依赖 npm run dev 运行项目 vue cli是Vue.js官方提供的命令行创建Vue.js项目脚手架的工具。 基于vue cli和browserify的项目模板 基于vue cli和webpack的项目模板 简单模式和安全模式 简单模式仅包含Vue.js开发必要的一些资源和包，可以快速开发。 完全漠视包括ESLink， 单元测试等。 Browserify是CommonJS风格的模块及依赖管理工具， 它不仅是一个打包工具，更关键的是其JavaScript的模块及依赖管理能力。 Browserify 使用 require()来引入其他模块， 使用module.exports来导出模块。 http://browserify.org/ vueify ,使用 .vue格式的文件定义组件， 一个.vue文件就是一个组件。 .vue文件定义的组件内容包括3部分： 1. <style></style>标签： 定义组件样式 2. <template></template>标签：定义组件模板 3. <script></script>标签：定义组件的各种选项，比如data, methods等。 hello.vue 定义组件： // app.vue < <style> .red { color: #f00; } < </style> < <template> <h1 class="red">{{msg}}</h1> < </template> < <script> e export default { data () { return { msg: 'Hello world!' } } } } < </script> 在组件文件中使用预处理语言： // app.vue < <style lang="stylus"> . .red color #f00 < </style> < <template lang="jade"> h h1(class="red") {{msg}} < </template> < <script lang="coffee"> m module.exports = data: -> msg: 'Hello world!' < </script> package.json - 项目配置文件， 包含的重要信息有： dependencies：项目发布时的依赖 devDependencies：项目开发时的依赖 scripts：编译项目的一些命令 .babelrc 定义了ES6的转码规则，基于ES6编写的js代码在编译时都会被babel转码器转换为ES5代码。 为什么要将ES6转换为ES5呢？因为我们将使用ES6的一些语法来编写.vue组件，而有些浏览器目前还没有全面支持ES6。 { "presets": ["es2015", "stage-2"], "plugins": ["transform-runtime"] } } babel是一个非常有名的ES6转码器，babel主页：https://babeljs.io/。 npm install 安装项目依赖， 安装的依赖位于 node_modules 文件夹中。 执行npm run dev 之后， dist 目录会产生一个 build.js 文件。 "scripts": { "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js", "serve": "http-server -c 1 -a localhost", "dev": "npm-run-all --parallel watchify serve" } } dev命令依赖于watchify，编译 src/main.js 输出到　dist/build.js http-server 是一个简易的Web服务器。 http://images2015.cnblogs.com/blog/341820/201607/341820-20160716184717545-22817188.png watchify是什么东东呢？browserify的编译是比较缓慢的，当一个browserify项目开始变大时，编译打包的时间会变得较长。watchify是一个browserify的封装，其在package.json中的配置和browserify是一样的。它可以持续件监视文件的改动，并且只重新打包必要的文件。在一个大型的项目中使用watchify，第一次打包的时候可能还会花较长时间，但是后续的编译打包将消耗较短的时间。 https://github.com/substack/watchify/ npm run build 生成发布时的build.js uglifyjs是基于nodejs的压缩程序，用于压缩HTML/CSS/JS，执行npm run build命令后生成的build.js就是经过压缩的。 simple-browserify模板用于构筑基于browserify和vueify的开发环境，browserify模板则提供了更多内容： 提供了ESLint：用于格式化JavaScript和检查JavaScript代码风格。 提供了单元测试：使用PhantomJS with Karma + karma-jasmine + karma-browserify的单元测试, 支持ES2015和mock。 import Vue from 'vue' 从node_modules文件夹下寻找vue.js import App from './App.vue'?表示引入同目录下的App.vue组件。 import Hello from './components/Hello.vue'?表示引入components目录下的Hello.vue组件 Hello.vue是App.vue的子组件： 前端构建工具： Grunt: 老旧 Gulp https://gulpjs.com/ Webpack