vue 笔记

脚手架

https://github.com/ElementUI/element-starter

参考文档

https://element.eleme.cn/#/zh-CN/component/installation
https://www.runoob.com/vue2/vue-tutorial.html
http://es6.ruanyifeng.com/
https://router.vuejs.org/zh/

环境搭建

安装node.js，附带npm，（PS：node版本>=6）

// 查看node版本
node --version
// 查看npm版本
npm -v

安装yarn

npm install -g yarn

下载脚手架，在根目录下运行

npm install
// 部署
npm run dev
// 打包
npm run build

默认端口8010，修改位置webpack.config.js

devServer: {
    host: '127.0.0.1',
    // 修改端口
    port: 8010,
    proxy: {
      '/api/': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    historyApiFallback: {
      index: url.parse(options.dev ? '/assets/' : publicPath).pathname
    }
  }

修改完成后需要重新启动

开发要点

遵循es6规范

• let和var的差异
• 解构赋值的优势
• 采用严格模式

如何读取本地json

1、在项目根目录（与src目录同级）新建static文件夹，将json放在此目录下
2、配置webpack.config.js

resolve: {
    alias: {
      		'~': resolve(__dirname, 'src'),
      		// 增加static
			'/static': resolve('static')
    },
    extensions: ['.js', '.vue', '.json', '.css']
  }

3、在请求中访问/static

let that = this;
that.$axios.get('/static/user.json', {username: username,password: password}).then(function (response) {
……			

如何使用axios

1、安装axios

// 安装axios
npm install axios --save

2、在main.js中进行引入

import axios from 'axios';

Vue.prototype.$axios = axios;

3、即可使用$axios

如何使用router

安装vue-router

// 安装vue-router
npm install vue-router

在项目中引入vue-router

import Vue from "vue";
import VueRouter from "vue-router";
// 引入组件
import home from "../components/Home.vue";
import about from "../components/About.vue";
import login from "../components/Login.vue";
import hello from "../components/Hello.vue";
// 启用vue-router
Vue.use(VueRouter);

const routes = [
    {
        path:"/home",
        component: home
    },
    {
        path: "/about",
        component: about
    },
	{
	    path: "/hello",
	    component: hello
	},
	{
	    path: "/login",
	    component: login
	},
    // 重定向
    {
        path: '/', 
        redirect: '/login' 
    }
]

var router = new VueRouter({
    routes
})
export default router;

路由的跳转

//声明式
<router-link to="/home">Home</router-link>
//编程式
let that = this;
that.$router.push({path:'/home'});

route和router的区别

• router是VueRouter的全局对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性
• route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等
  摘自 https://www.cnblogs.com/czy960731/p/9288830.html

Do not use built-in or reserved HTML elements as component
组件不能和html标签重复