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
- 引入篇
- 基礎篇
- 快速入手
- 名詞解釋
- Vue語法
- Vue安裝
- Vue實例
- 模板語法
- 計算屬性和偵聽器
- Class與Style綁定
- 條件渲染
- 列表渲染
- 事件處理
- 表單輸入綁定
- 組件基礎
- 進階篇
- 常用模塊
- 單文件組件
- 快速學會Vue Router路由
- Vue Route 進階使用
- Vuex 與狀態管理
- Axios
- Mock.js
- data數據顯示在頁面
- Vue生命周期
- Vue按需加載組件
- 國際化
- 頁面加載進度條 -NProgress
- 自定義主題顏色
- 開發篇
- Vue入門——創建并運行一個Vue項目
- Vue + Element UI 項目創建
- 使用Vue ui項目創建工具在網頁中創建Vue項目
- Vue項目創建入門實例
- Vue CLI
- 創建項目
- 使用Visual Studio Code 開發Vue項目
- 高級篇
- 組件深入
- Vue+Element
- Vue + ElementUI 主題顏色切換
- 工具篇
- 在線代碼編輯器
- 開發工具(IDE,集成開發環境)
- npm(JavaScript包管理工具)介紹
- Node.js(npm)在Windows下安裝
- webpack介紹
- webpack快速實例
- webpack
- 快速入門實例
- 安裝
- 概念
- Nodejs
- 基礎
- npm
- 命令參考
- 命令
- 模塊安裝
- Babel
- 問題解決篇
- ERROR Failed to get response from https://registry.yarnpkg.com/vue-cli-version -marker
- Vue常見問題
- You are using the runtime-only build of Vue where the template compiler is not
- yarn 報unable to get local issuer certificate
- yarn There appears to be trouble with your network connection. Retrying
- Expected Boolean, got String with value "true".
- 項目篇
- 項目創建
- 項目設計
- 頁面
- 開發問題
- 后端
- Spring Boot + Activiti 工作流框架搭建之一
- Spring Boot + Activiti 工作流框架搭建之二
- 工作流
- Java流程框架
- Activiti
- 頁面風格
- green
- blue
- orange
- 參考篇
- 好的Git項目
- Vue的在線js
- 指令
- 開發說明
- JavaScript 高級
- export和import
- JS模塊化規范對比以及在Node.js的實現
- Storage
- ES2015
- scss
- CSS、Sass、SCSS