vue-cli
1. 新建vue-cli項目
命令 vue init webpack project-name
use ESLint to lint your code? 這個是格式檢測的東西，不需要選擇NO
Setup unit tests? NO
setup e2e tests with NightWatch NO
2. 安裝sass sass-loader
命令 npm install node-sass --save-dev
? ? npm install sass-loader --save-dev
vue-cli 已經(jīng)幫我們配置好了webpack 直接用就好了
3. 安裝rem 自適應(yīng)布局 推薦使用淘寶的 flexible
(1) 安裝 lib-flexible
命令 npm install lib-flexible --save
在項目入口文件 main.js 里面 引入lib-flexible
import 'lib-flexible'
(2) 添加meta 標(biāo)簽 (3) px 轉(zhuǎn) rem
安裝 px2rem-loader
命令 npm i px2rem-loader --save-dev
配置 px2rem-loade
在 vue-cli 生成的 webpack 配置中，vue-loader 的 options 和其他樣式文件 loader 最終是都是由 build/utils.js 里的一個方法生成的。
我們只需在 cssLoader 后再加上一個 px2remLoader 即可，px2rem-loader 的 remUnit 選項意思是 1rem=多少像素，結(jié)合 lib-flexible 的方案，我們將 px2remLoader 的 options.remUnit 設(shè)置成設(shè)計稿寬度的 1/10，這里我們假設(shè)設(shè)計稿寬為 750px。
var cssLoader = {
? loader: 'css-loader',
? options: {
? ? minimize: process.env.NODE_ENV === 'production',
? ? sourceMap: options.sourceMap
? }
}
var px2remLoader = {
? loader: 'px2rem-loader',
? options: {
? ? remUnit: 75
? }
}
并放進(jìn) loaders 數(shù)組中
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader,px2remLoader,postcssLoader] : [cssLoader,px2remLoader]
if (loader) {
? loaders.push({
? ? loader: loader + '-loader',
? ? options: Object.assign({}, loaderOptions, {
? ? ? sourceMap: options.sourceMap
? ? })
? })
}
}
4. spa router路由配置
此前安裝vue init webpack project 的時候若是選擇安裝了router，不用再安裝了
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Demo from '@/components/Demo'
import User from '@/components/User'
import Mine from '@/components/Mine'
Vue.use(Router)
export default new Router({
? routes: [
? ? {
? ? path: '/',
? ? name: 'HelloWorld',
? ? component: HelloWorld
? ? },
? ? {
? ? path:'/My',
? ? name:'my',
? ? component:My,
? ? children:[
? ? {
? ? path:'/My/user',
? ? name:'User',
? ? component:User
? ? },
? ? {
? ? path:'/My/mine',
? ? name:'Mine',
? ? component:Mine
? ? }
? ? ]
? ? }
? ]
})
5. 項目初期對公共樣式的處理 此前已經(jīng)安裝過node-sass sass-loader,對于公共樣式的處理引入，一般都是放到main.js里面
import './common/css/reset.css' 即可
建議直接放到static靜態(tài)文件里面
6. 安裝 vuex
首先安裝 vuex
命令:? npm install vuex -s
然后在main.js 里面引入
import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import store from './vuex/store'
Vue.use(Vuex)
/* eslint-disable no-new */
new Vue({
? el: '#app',
? store,
? render: h => h(App)
}
第二步 構(gòu)建核心的倉庫 store.js
Vuex 應(yīng)用的狀態(tài) state 都應(yīng)當(dāng)存放在 store.js 里面，Vue 組件可以從 store.js 里面獲取狀態(tài)，可以把 store 通俗的理解為一個全局變量的倉庫。
但是和單純的全局變量又有一些區(qū)別，主要體現(xiàn)在當(dāng) store 中的狀態(tài)發(fā)生改變時，相應(yīng)的 vue 組件也會得到高效更新。(不知道是不是可以理解為把所有的狀態(tài)都放到store.js里面去處理，這樣會不會狀態(tài)太多？暫時還不清楚)
在 src 目錄下創(chuàng)建一個 vuex 目錄，將 store.js 放到 vuex 目錄下
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
? // 定義狀態(tài)
? state: {
? ? author: 'suolun'
? }
})
export default store
雖然在 main.js 中已經(jīng)引入了 Vue 和 Vuex，但是這里還得再引入一次
第三步：將狀態(tài)映射到組件
computed: {
? author () {
? ? return this.$store.state.author
? }
}
主要在 computed 中，將 this.$store.state.author 的值返回給 html 中的 author
頁面渲染之后就能獲取到數(shù)據(jù)了
{{author}}
第四步：在組件中修改狀態(tài)
這個方法還是比較簡單的
methods: {
setAuthor: function () {
this.$store.state.author = this.inpuTxt
}
}
一眼就能看的懂
直接賦值就好了
五:官方推薦的修改狀態(tài)的方式
具體方式看鏈接 http://www.cnblogs.com/wisewrong/p/6344390.html
推薦官方的方式，可以讓我們更好的跟蹤每一個狀態(tài)的變化，
7.組件
組件的運用簡單分為兩種，一種是全局組件，一個是內(nèi)部組件，什么時候用全局還是局部的，看場景
8.關(guān)于vue-cli 解決跨域的問題
config下修改地方
dev.env.js
module.exports = merge(prodEnv, {
? NODE_ENV: '"development"',
? DEBUG_MODE:true,
? API_KEY:'"/api"'
})
prod.env.js
module.exports = {
? NODE_ENV: '"production"',
? DEBUG_MODE:false,
? API_KEY:'""'
}
index.js
env:require('./dev.env'),
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
? ? //手動配置ajax開發(fā)環(huán)境跨域問題
? ? '/api/': {
? ? ? ? target: 'https://www.xxxx.com/',
? ? ? ? changeOrigin: true,
? ? ? ? pathRewrite: {
? ? ? ? ? '^/api': ''
? ? ? ? }
? ? ? }
},
在src下新建一個api.js
var root = process.env.API_KEY
export default{
? data:root
}
main.js
import Vue from 'vue'
import axios from 'axios'
import api from './api'
Vue.prototype.$http = axios;
Vue.prototype.$api = api.data
用法
this.$http({
? method:'get',
? url:this.$api+'/app/home/brand_list',
}).then(res=>{
? console.log(res)
})
