前端学习路线-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端学习路线。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 脚手架 vue-cli

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

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

2.element-ui

官方文档：地址
1.安装

npm i element-ui -S

全局使用(以后可以在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;