Day 11 vue-cli、Vue.js工程化项目起步

1、安装node.js

具体安装过程见文章：https://www.jianshu.com/p/e3e5c9c68f66
vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就可以了。

2、Vue的单页应用的脚手架程序构建

• 进入某个目录，如：E://VueStudy

  
  
  

• 通过命令创建项目：vue init webpack vue-router-demo

  
  
  
  
  
  

  创建成功

• 进入vue-router-demo目录

• 安装依赖：npm install

  
  
  

  安装依赖

更改端口号

• 测试
  
  

  测试成功
  
  注意:ctrl+c退出批处理状态

3、进行一级路由配置

• 项目结构

  
  
  

  项目结构
• 在package.json的依赖文件，加入axios依赖

"dependencies": {
   "vue": "^2.5.2",
   "vue-router": "^3.0.1",
   "axios": "^0.18.0"
 }

• 安装axios，在命令行：npm install
• 项目的src目录的main.js文件引入axios

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false
Vue.prototype.$http = axios

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

• 配置index.js文件

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
   // 去除#的hash模式
   mode: "history",
   routes: [
       {
           //我的班课
           path: '/',
           name: 'Index',
           component: resolve => require(['../components/Index.vue'], resolve)
       },
       {
           //任务中心
           path: '/task',
           name: 'Task',
           component: resolve => require(['../components/Task.vue'], resolve)
       },
       {
           //库管理
           path: '/lib',
           name: 'Lib',
           component: resolve => require(['../components/Lib.vue'], resolve)
       },
       {
           //个人中心
           path: '/ucenter',
           name: 'UCenter',
           component: resolve => require(['../components/UCenter.vue'], resolve)
       },
       {
           //新建班课
           path: '/new_course',
           name: 'NewCourse',
           component: resolve => require(['../components/NewCourse.vue'], resolve)
       },
       {
           //班课详情
           path: '/course/:id',
           name: 'CourseDetail',
           component: resolve => require(['../components/CourseDetail.vue'], resolve)
       }
   ]
})

• 路由跳转例子：
  • 无参跳转

    

任务中心

• 路径传参跳转：

• js跳转：
  _this.$router.push('/');
• components文件夹建立相应的组件
• 具体代码见github地址：https://github.com/Wuyou1999/VueStudy/tree/master/vue-router-demo1

• 部分演示图

  
  
  

  1.jpg

2.jpg

3.jpg

4.jpg