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: Contact }
]

实例路由并导出

// 实例该路由配置
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})
export default router

挂载router

//在main.js文件内挂在路由

//引入路由
import router from './configs/router.js'
new Vue({
  // 挂载路由
  router,   
  render: h => h(App), //App也可以换成'router-view'，此时App页面将作为页面组件
}).$mount('#app')

放置router-view

放置router-view，根据上面路由配置的规则，让组件出现

<router-view></router-view>

Vue路由官网

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

例：router.js文件

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

//一层路由
import App from '../App.vue'
import Log_reg from '../pages/Log_reg.vue'
import Details from '../pages/Details.vue'


//二层路由
import Car from '../pages/Car.vue'
import Home from '../pages/Home.vue'
import My from '../pages/My.vue'
import Zworks from '../works/Zworks.vue'//全作品

//三层路由->全作品
import ZworksSofa from '../works/ZworksSofa.vue'//沙发
import Zworksbed from '../works/Zworksbed.vue'//床具
import ZworksChest from '../works/ZworksChest.vue'//柜架
import ZworksStool from '../works/ZworksStool.vue'//椅凳
import ZworksTable from '../works/ZworksTable.vue'//桌几

const routes = [
    { path: '/log_reg', name: 'log_reg', component: Log_reg },  	  //注册登陆页面路由

    { path: '/details/:id', name: 'details', component: Details },	  //详情页面路由

    {
        path: '/app', name: 'app', component: App,				  	 //app页面路由
        children: [
            { path: 'home', name: 'home', component: Home },	//首页路由

            {                                               	//我的页面路由及路由拦截
                path: 'my', name: 'my', component: My, beforeEnter: (to, from, next) => {
                    let token = localStorage.getItem('zaozuo_token');
                    if (token != null) {
                        next()
                    } else {
                        router.push({ name: 'log_reg' });
                    }
                }
            },                                              
                                                        
            { path: 'car', name: 'car', component: Car },		//购物车路由
               
            {path: 'Zworks', name: 'Zworks', component: Zworks,  //全作品路由
               children: [
                  { path: 'ZworksSofa/:id', name: 'ZworksSofa', component: ZworksSofa},//沙发
                  { path: 'Zworksbed/:id', name: 'Zworksbed', component: Zworksbed},//床具
                  { path: 'ZworksChest/:id', name: 'ZworksChest', component: ZworksChest},//柜架
                  { path: 'ZworksStool/:id', name: 'ZworksStool', component: ZworksStool},//椅凳
                  { path: 'ZworksTable/:id', name: 'ZworksTable', component: ZworksTable},//桌几
                ]
            },
        ]
    },
  
    //路由重定向
    { path: '/', redirect: { name: 'home' } },
]


//实例该路由
const router = new VueRouter({
    routes
})

// 全局路由守卫
// router.beforeEach((to, from, next) => {
//     let token = localStorage.getItem('token');
//     if(token != null ||  to.path == '/app/register'){
//         next();
//     }else{
//         router.push({
//             name: 'register'
//         })
//     }
// })

export default router