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 已经帮我们配置好了webpack 直接用就好了
3. 安装rem 自适应布局 推荐使用淘宝的 flexible
(1) 安装 lib-flexible
命令 npm install lib-flexible --save
在项目入口文件 main.js 里面 引入lib-flexible
import 'lib-flexible'
(2) 添加meta 标签 (3) px 转 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=多少像素，结合 lib-flexible 的方案，我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10，这里我们假设设计稿宽为 750px。
var cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
并放进 loaders 数组中
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. 项目初期对公共样式的处理 此前已经安装过node-sass sass-loader,对于公共样式的处理引入，一般都是放到main.js里面
import './common/css/reset.css' 即可
建议直接放到static静态文件里面
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)
}
第二步 构建核心的仓库 store.js
Vuex 应用的状态 state 都应当存放在 store.js 里面，Vue 组件可以从 store.js 里面获取状态，可以把 store 通俗的理解为一个全局变量的仓库。
但是和单纯的全局变量又有一些区别，主要体现在当 store 中的状态发生改变时，相应的 vue 组件也会得到高效更新。(不知道是不是可以理解为把所有的状态都放到store.js里面去处理，这样会不会状态太多？暂时还不清楚)
在 src 目录下创建一个 vuex 目录，将 store.js 放到 vuex 目录下
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
// 定义状态
state: {
author: 'suolun'
}
})
export default store
虽然在 main.js 中已经引入了 Vue 和 Vuex，但是这里还得再引入一次
第三步：将状态映射到组件
computed: {
author () {
return this.$store.state.author
}
}
主要在 computed 中，将 this.$store.state.author 的值返回给 html 中的 author
页面渲染之后就能获取到数据了
{{author}}
第四步：在组件中修改状态
这个方法还是比较简单的
methods: {
setAuthor: function () {
this.$store.state.author = this.inpuTxt
}
}
一眼就能看的懂
直接赋值就好了
五:官方推荐的修改状态的方式
具体方式看链接 http://www.cnblogs.com/wisewrong/p/6344390.html
推荐官方的方式，可以让我们更好的跟踪每一个状态的变化，
7.组件
组件的运用简单分为两种，一种是全局组件，一个是内部组件，什么时候用全局还是局部的，看场景
8.关于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开发环境跨域问题
'/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)
})
