vue.js了解之开局篇2

目录
  1. vue-router页面跳转
    1. 主组件App.vue
    2. 例1（实现A跳转到B，B再返回A）
    3. 路由的显示模式
  2. vue-cli 3 图形界面
  3. vue-cli 3 命令行手动搭建项目

千里修书只为墙，让他三尺又何妨。
本文为本人略读官网文档后的大略笔记，实在不适合他人阅读。

前言

1. vue-router 页面跳转

src目录的router目录下有一个index.js，负责页面跳转配置。

1. 主组件App.vue

App.vue文件（其中<router-view/>挂载index.js中路径为/的组件）

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!--index.js 是在这里被App.vue使用的-->
    <!--挂载路由，会挂载路径为/的组件-->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2. 例1（实现A跳转到B，B再返回A）

修改router的index.js

import Vue from 'vue'
import Router from 'vue-router'
import A from '@/components/A'
import B from '@/components/B'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',    // 用于router-link的to设置路径
      component: A  // 初始页面
    },
    {
      path: '/b',
      component: B
    },
  ]
})

src | compoments下创建A.vue，内容如下

<template>
  <div>
      <p>Hello A!</p>
      <p>
        <router-link to='/b'>to B</router-link>
      </p>
  </div>
</template>


<script>
</script>

<style scoped>
p {
  color: #42b983;
}
</style>

src | compoments下创建B.vue，内容如下

<template>
    <div>
        <p>Hello B!</p>
        <p>
            <router-link to='/'>返回</router-link>
        </p>
    </div>
</template>


<script>
</script>

<style scoped>
p {
  color: #42b983;
}
</style>

A页 B页

2. 例2（实现A跳转到B，B跳转到子页面BChild）

子页面会显示在父页面上

修改router的index.js

import Vue from 'vue'
import Router from 'vue-router'
import A from '@/components/A'
import B from '@/components/B'
import BChild from '@/components/BChild'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: A
    },
    {
      path: '/b',
      component: B,
      children:[
        {
            path: '/b1',
            component: BChild,
        }
      ],
    },
  ]
})

src | compoments下创建BChild.vue，内容如下

<template>
    <div>
        <p>Hello BChild!</p>
        <p>
            <router-link to='/b'>返回</router-link>
            <router-link to='/'>返回首页</router-link>
        </p>
    </div>
</template>


<script>
</script>

<style scoped>
p {
  color: #42b983;
}
</style>

修改B.vue

<template>
    <div>
        <p>Hello B!</p>
        <p>
            <router-link to='/'>返回</router-link>
            <router-link to='/b1'>to BChild</router-link>
            <!--挂载子路由，必须加-->
            <router-view></router-view>
        </p>
    </div>
</template>


<script>
</script>

<style scoped>
p {
  color: #42b983;
}
</style>

B BChild

3. 路由的显示模式

路由2种显示模式

  1. hash模式（默认）
    地址栏会显示#
    因为包含#这个特殊字符，在处理微信支付、分享时会存在问题
  2. history模式
    可修改历史记录。页面不存在时会报404，与后端协调。

修改index.js（修改mode为history模式）

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import A from '@/components/A'
import B from '@/components/B'
import BChild from '@/components/BChild'

Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      component: A
    },
    {
      path: '/b',
      component: B,
      children:[
        {
            path: '/b1',
            component: BChild,
        }
      ],
    },
  ]
})

hash模式下地址栏中存在#
history模式

2. vue-cli 3

卸载vue-cli 
  cnpm uninstall vue-cli -g

查看版本（找不到命令则卸载成功）
  vue -V

安装vue-cli 3
  cnpm install -g @vue/cli

1. 以图形界面创建项目

启动图形界面
vue ui

图形界面 新建项目 新建项目2 新建项目3 新建项目4 新建项目5 插件 任务-运行 运行结果

3. vue-cli 3 命令行手动搭建项目

1. 创建项目

// preset：必要依赖：选择手动然后空格选择router最后回车
// 使用npm
vue create hello

cd hello
npm run server

src下新增了一个views目录，用于存放视图。
项目根目录下新增了一个public目录，存放静态文件、公共文件

2. 例1

修改src目录的router目录的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import A from '../views/A.vue'
import B from '../views/B.vue'
import BChild from '../views/BChild.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: A
  },
  {
    path: '/b',
    component: B,
    children:[
        {
          path: '/b1',
          component: BChild,
        }
    ]
  },]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

src | compoments下创建A.vue、B.vue、BChild.vue，内容同第1节用例相同

运行效果

3. 修改样式

对于通用的样式，可以在index.html中引入

public目录下新建common.css

p {
  color: #42b983;
}

修改App.vue

<template>
  <div>
      <p>Hello A!</p>
      <p>
        <router-link to='/b'>to B</router-link>
      </p>
  </div>
</template>


<script>
</script>

<style scoped>
@import "../../public/common.css"
</style>