vue.config.js中的常用配置：
module.exports = {//基本路径，vue.cli 3.3以前请使用baseUrlpublicPath: "./",configureWebpack: {resolve: {alias: {assets: "@/assets",common: "@/common",components: "@/components",network: "@/network",views: "@/views"}}},//项目启动的一些配置，如果有跨域问题可以在这里进行设置代理devServer: {port: 3333,open: true}
};
页面跳转：
标签：<router-link to='two.html'><button>点我到第二个页面</button></router-link>
js： this.$router.push({path:'/home'})
路由：
路由懒加载写法，以下是ES6写法：
{path: '/about',component: () => import('../components/About')
},路由正常加载和懒加载的区别：
正常方式：进入页面的时候就加载这个组件，路由过多时一起加载会造成速度变慢
懒加载：进入这个页面才进行加载这个组件，能极大提升应用加载速度
嵌套路由：
比如在home页面中，我们希望通过/home/news和/home/message访问一些内容
一个路径映射一个组件，访问这2个路径也会分别渲染两个组件
实现嵌套路由：
创建对应的子组件，并且在路由映射中配置对应的子路由在组件内部使用标签
路由传递参数的方式主要有2种类型：params 和query
params的类型
配置路由格式： /router/:id
传递方式：在path后面跟随对应的值 传递后形成的路径：/router/123, /router/abc
this.$router.push({name: 'home' , params: {name: 'Jack'}})
query的类型：
配置路由格式: /router,普通配置
传递方式： 对象中使用query的key作为传递方式 传递后形成的路径： /router?id=123,/router?id=abc
this.$router.push({path: '/home' , query: {name: 'Jack'}})
注意以上params是使用的name，query是使用的path，所以如果使用了params，路由配置中记得加上name字段
组件放置目录
在src文件夹下创建views 或者是pages文件夹 ，存放视图文件夹，如home,category,cart,profile文件夹，在这些文件夹下又存放着各自的vue组件，如profile组件，如果该组件底下还有相关的组件，依旧放在profile文件夹中。
总结就是放独立组件
components文件夹放什么呢？放一些公共的组件，如上面的home,category（2个以及2个以上都能用到的组件）放进去即可
给某些文件夹起别名
cli2 的build/webpack.base.conf文件中
resolve: {extensions: ['.js', '.vue', '.json'],alias: {'@': resolve('src'),'assets': resolve('src/assets'),'components': resolve('src/components')}
},
cli3的vue.config.js中
configureWebpack: {resolve: {alias: {assets: "@/assets",common: "@/common",components: "@/components",network: "@/network",views: "@/views"}}},
标签中使用别名
<img src='~assets/img/tabbar/category.svg' slot="item-icon">
script中使用别名
import TabBar from 'components/tabbar/TabBar'
vuex 状态管理
多个组件间之间共享的状态一般都放vuex： 如用户的登录状态，用户名称，头像，地理位置信息等到
vuex安装： npm install vuex --save
使用： 在src目录下新建store文件夹，创建index.js，记得在main.js中引入
import Vue from "vue";
import Vuex from "vuex";Vue.use(Vuex);export default new Vuex.Store({state: {},mutations: {},actions: {},modules: {}
});
在页面中使用全局状态：
<h3>{ {$store.state.counter}}h3>
只要是涉及到修改state的，都应该使用mutations来进行
页面按钮涉及到修改state，在按钮的点击事件中提交mutations中的函数名
testBt() {
this.$store.commit('increment')
}
如果是提交actions，则用dispatch，actions中的方法内部一般都是通过context去执行mutaions中的方法
使用devtools进行开发调试
谷歌插件商品搜索 devtools，找到vue的那一项进行安装，
store中的数据是响应式的，但是如果是后面增加的属性，则不会有响应式方法，mutation中的方法必须是同步方法，不然devtools不好跟踪数据
对象解构语法：
const obj = {
name: 'why',
age: 18,
height: 1.88
}const {name, age, height} = obj;
console.log(name)网络请求的使用：
安装axios : npm install axios --save
导入别的模块的代码时，如果该文件没有使用default导出，则导入的时候需要加上花括号，如
import {request} from './network/request'
新建项目后优先做的事就是目录划分，如src目录下：
1.assets文件夹下新建css和img目录
2.新建views视图文件夹，存放视图
3.components放一些公共的组件，components又分为以下两类。
common 和 content ，common放一些不仅仅是当前项目会用到的，下一个项目也可以使用的，总结就是完全公共的。content放一些和当前业务相关的组件，放下一个项目中应该是不能用的，只和当前项目相关。
4.新建network文件夹，封装网络请求 , npm install axios --save
5.新建common文件夹，放一些公共的js文件，如公共的常量或者是工具类
6.新建router文件夹，表示路由，文件夹内创建index.js npm install vue-router --save
7.新建store文件夹，表示vuex状态管理
8.路径别名配置（脚手架3下进行配置）,通过新建vue.config.js进行配置