vue 基础和项目基础架构

1.每一个.vue 文件都可以理解成一个组件，在他内部有 data，有如下一些函数，分别存在于 vue 的各个生命周期中。

beforeCreate() {

  },
  created() {

  },
  mounted() {

  },
  beforeMount() {

  },
  updated() {

  },
  beforeUpdate() {

  },
  destroyed() {

  },
  beforeDestroy() {

  }

2.同时 vue 存在好 el 和 data 两个对象，其中 el 对象是整个的 vue 对象，只有在 mounted（渲染之后）才会出现，data 对象是存储这个 vue 中的数据，在 created 之后会出现。这部分都可以类比微信小程序的 onShow 方法，data 对象等等。
3.发现一个小插曲，即在 vue 中的 js 代码中必须使用 window.console.log()而非 console.log()。经过百度之后，解决办法是在 package.json 中加入

"rules":  {
	"no-console": "off"
}

这样的话在 ws 中的报错会消失，但是在项目打包的时候仍然会报错，因此暂时先使用 window
4.项目的一些相关规范
components 放组件，大写
pages 放页面，小写
assets 放一些静态资源，如 css 和 imgs
5.利用 vue cli 这个页面安装相关的依赖
vue-rounter，axios， vue-axios 三个依赖
6.建立路由，即 router.js，注意是 new Router，这个地方和网上犯的错误一模一样

import Vue from "vue"
import Router from "vue-router"
import Cart from ".pages/cart"
import Address from "./pages/address";
Vue.use(Router)
export default new Router({
    routes:[
        {
            path: "/",
            name: "cart",
            component: Cart
        },
        {
            path: "/address",
            name: "address",
            component: Address
        }
    ]
})

7.这个时候编译报错，发现是 axios 没有安装上去，当我再次安装的时候还是安装不上去，因此直接采用如下方式来安装，成功！

npm install axios --save

8.先创建 router.js，然后在 main.js 里边导入 router，使用 router，最后在 app.vue 里边使用 router-view
9.这个时候已经可以通过/访问到 cart 页面，通过/address 访问到 address 页面，但是会有一个小小的瑕疵，就是提示你 address 是 html 的标签， 尽量不用重复，这个时候给 vue 组件换一个名字就醒了。
10.做一些项目的配置，自定义配置
建立 vue.config.js，可以更改一些默认的配置，如主机，端口，代理等等

module.exports = {
    publicPath: '',
    devServer: {
        host: "localhost",
        port: 9090,
        proxy: {
            '/mock': {
                target: "http://localhost:9090",
                ws: false,
                changeOrigin: false
            }
        }
    }
}