vue学习

1. 脚手架 vue-cli

作用：快速创建一个前端项目骨架
详细参考：文章地址

注意点：1.创建项目的两种命令：vue create 项目名， 是vue-cli高版本，vue init webpack 项目名，是低版本
2. 创建项目之后，进入项目文件夹， 输入code .，自动在vscode中打开

2.element-ui

官方文档：地址
1.安装

npm i element-ui -S

2. 全局使用(以后可以在vue组件中直接使用)

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

注意：全局引入和局部引入

3.vue-router

官方文档：地址
1.vue2使用vue-router3版本
2.npm官网：地址，可以查看当前最新的3版本是多少
3.在src文件夹下新建router/index.js文件，在该文件中配置vue-router，内容：

import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入组件
import Home from '@/views/Home'
import User from '@/views/User'
Vue.use(VueRouter)
// 路由组件进行映射
const routes = [
  { path: '/home', component: Home },
  { path: '/user', component: User }
]
// 创建router实例，传入routes配置
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})
// 暴露
export default router;

在main.js中挂载到实例：

// 默认读取index.js文件
import router from './router';

new Vue({
  // 挂载
  router,
  render: h => h(App),
}).$mount('#app')

主界面配置路由出口：

<router-view/>
4.嵌套路由

import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入组件
import Home from '@/views/Home'
import User from '@/views/User'
import Main from '@/views/Main'
Vue.use(VueRouter)
// 路由组件进行映射
const routes = [
  {
    path: '/',
    component: Main,
    children:[
      // 可以带或不带/ 
      { path: 'home', component: Home },
      { path: 'user', component: User }
    ]
  },
]
// 创建router实例，传入routes配置
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})
// 暴露
export default router;

Main.vue中

 <router-view/>

3. Vuex

4. axios

5.cross-env (解决不同系统之前的命令兼容问题)

参考文章：地址

补充知识

1. 全局注册组件，表示可以在其他任何组件内直接使用组件，比如<HelloComponent/>
   参考文章：地址