vue-cli
1. 新建vue-cli項(xiàng)目
命令 vue init webpack project-name
use ESLint to lint your code? 這個(gè)是格式檢測(cè)的東西胡嘿，不需要選擇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
在項(xiàng)目入口文件 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 里的一個(gè)方法生成的。
我們只需在 cssLoader 后再加上一個(gè) px2remLoader 即可灶平，px2rem-loader 的 remUnit 選項(xiàng)意思是 1rem=多少像素伺通，結(jié)合 lib-flexible 的方案箍土，我們將 px2remLoader 的 options.remUnit 設(shè)置成設(shè)計(jì)稿寬度的 1/10逢享，這里我們假設(shè)設(shè)計(jì)稿寬為 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 的時(shí)候若是選擇安裝了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. 項(xiàng)目初期對(duì)公共樣式的處理 此前已經(jīng)安裝過(guò)node-sass sass-loader,對(duì)于公共樣式的處理引入瞒爬，一般都是放到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)建核心的倉(cāng)庫(kù) store.js
Vuex 應(yīng)用的狀態(tài) state 都應(yīng)當(dāng)存放在 store.js 里面，Vue 組件可以從 store.js 里面獲取狀態(tài)沟堡，可以把 store 通俗的理解為一個(gè)全局變量的倉(cāng)庫(kù)侧但。
但是和單純的全局變量又有一些區(qū)別，主要體現(xiàn)在當(dāng) store 中的狀態(tài)發(fā)生改變時(shí)航罗，相應(yīng)的 vue 組件也會(huì)得到高效更新禀横。(不知道是不是可以理解為把所有的狀態(tài)都放到store.js里面去處理，這樣會(huì)不會(huì)狀態(tài)太多粥血？暫時(shí)還不清楚)
在 src 目錄下創(chuàng)建一個(gè) 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
頁(yè)面渲染之后就能獲取到數(shù)據(jù)了
{{author}}
第四步：在組件中修改狀態(tài)
這個(gè)方法還是比較簡(jiǎn)單的
methods: {
setAuthor: function () {
this.$store.state.author = this.inpuTxt
}
}
一眼就能看的懂
直接賦值就好了
五:官方推薦的修改狀態(tài)的方式
具體方式看鏈接 http://www.cnblogs.com/wisewrong/p/6344390.html
推薦官方的方式趾娃，可以讓我們更好的跟蹤每一個(gè)狀態(tài)的變化，
7.組件
組件的運(yùn)用簡(jiǎn)單分為兩種缔御，一種是全局組件抬闷，一個(gè)是內(nèi)部組件，什么時(shí)候用全局還是局部的耕突，看場(chǎng)景
8.關(guān)于vue-cli 解決跨域的問(wèn)題
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: {
? ? //手動(dòng)配置ajax開(kāi)發(fā)環(huán)境跨域問(wèn)題
? ? '/api/': {
? ? ? ? target: 'https://www.xxxx.com/',
? ? ? ? changeOrigin: true,
? ? ? ? pathRewrite: {
? ? ? ? ? '^/api': ''
? ? ? ? }
? ? ? }
},
在src下新建一個(gè)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)
})
