vue脚手架 & 路由(vue-router)

脚手架

https://cli.vuejs.org/zh/guide/#html

vue-cli vue的开发环境

vue(它的核心是依赖于webpack实现的)

vue的模块化和组件化的开发环境

vue-cli + vue-dev-tool + vue-router + vuex

全局安装，就会在全局有一个vue的命令

npm install -g @vue/cli

创建项目

vue create [项目名字]

选择默认default选项(babel，eslint)

运行项目

npm run serve
//npm start

依赖

devDependencies这个是非必须依赖，开发环境时候才需要用到的第三个模块

gulp
webpack
css-loader
url-loader

dependencies这个是必须依赖，也就是你打包之后真正需要用到的模块

jquery
vue
weui
bootstrap

路由

• 实现单页面应用，只有一个页面，页面更新不跳转页面，而是局部刷新(切换)(三阶段)
• 多页面应用，页面跳转会刷新(二阶段)

安装

安装vue路由，是一个必须依赖

npm install vue-router --save

创建路由配置文件

//在src内创建configs文件夹，configs内创建router.js文件，写入以下代码

import Vue from 'vue'
// 引入路由模块
import VueRouter from 'vue-router'
// 显式安装该模块
Vue.use(VueRouter)

如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

定义路由组件

1. 使用单文件组件定义路由组件

第一种：单文件组件(xxx.vue) //例如Xheader.vue
第二种：const = {
   template: '<div>foo</div>' }

2. 创建一个pages文件夹，放路由组件->页面组件

定义路由

引入组件，并配置路由参数

// 微信路由 微信页面
import Wechat from './pages/Wechat.vue'
// 联系路由 联系页面
import Contact from './pages/Contact.vue'
// 配置路由
const routes = [
  // 如果url的路由为 /foo，进入Foo组件
  {
    path: '/wechat', component: Wechat },
  {
    path: '/contact', component