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