vue-cli 路由

需求及效果图：

• 制作导航效果，点击对应连接，跳转到对应页面。
  - Home：/
  - About:/about/
  - Contact:/contact/
• 效果图

安装bootstrap相关包

方法一：
npm install bootstrap@3 --save
css /js
npm install jquery@3 --save
js

方法二：
写入文件：
“dependencies”: {
…
“jquery”: “^3.4.1”,
“bootstrap”: “^3.4.1”,
},

执行：npm install => 读取package.json文件，将需要的依赖全部安装上

1. 加载css样式
   // 全局加载bootstrap的css样式 => node_modules -> …
   import ‘bootstrap/dist/css/bootstrap.min.css’

2. 编写 Guid.vue
   

   Toggle navigation Project name

   • Home
   • About
   • Contact

3. 在App.vue组件中使用Guid.vue

4. 实现路由
   vue-router => 安装
   a. src/router/index.js => 定义配置路由
   b. 在main.js加载路由配置
   c. 创建子组件Home.vue。。。。
   d. 将原来普通链接方式，修改成和
   
   

关于使用bootstrap样式（css）

1. 安装bootstrap
2. 加载css文件
3. copy对应样式

使用路由：
跳转 => 链接

1. 安装vue-router
2. 定义(配置)路由 => src/router/index.js
   /a 加载A.vue
   /a 加载A.vue
   /a 加载A.vue
3. 全局加载路由 => src/main.js
   导入
   加载
4. 在需要使用路由的组件文件中
   将原来普通的
   => < router-link>
   组件加载到哪里？
   </r outer-view>

使用Jquery和Bootstrap

Jquery => webpack plugin => 全局加载
Bootstrap => main.js 、 guid.vue

jquery => 全局加载
1. 项目根目录 vue.config.js
const webpack = require(“webpack”)

	module.exports = {
	  configureWebpack: {
	    plugins: [
	      new webpack.ProvidePlugin({
	        $: "jquery",
	        jQuery: "jquery",
	        "windows.jQuery": "jquery"
	      })
	    ]
	  }
	}
2. eslint => 语法检查，识别jquery 
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true,
      "jquery": true   
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },

加载bootstrap
import ‘bootstrap’ => 自动安装目录下查找bootstrap.js文件

别名： vue.config.js

// 别名
const path = require(‘path’)
const resolve = dir => path.join(__dirname, dir);

module.exports = {
// 配置webpack加载插件
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: “jquery”,
jQuery: “jquery”,
“windows.jQuery”: “jquery”
})
]
},
chainWebpack: config => {
// 添加别名
config.resolve.alias
// .set(’@’, resolve(‘src’))
// .set(‘assets’, resolve(‘src/assets’))
.set(’_c’, resolve(‘src/components’))
// .set(‘layout’, resolve(‘src/layout’))
// .set(‘base’, resolve(‘src/base’))
// .set(‘static’, resolve(‘src/static’));
},
}

使用

常见简单错误

• tab 和 space 混用 => ctrl+k , 启动时加–fix
• xxx is not define => 没有定义，没有导入
• 定义了未使用
• 找不到xxx模块 xxx.vue

放错目录了！！！
不要在一个Hbuild X窗口打开两个项目
vue.config.js => 重启服务
ctrl+s

父子路由-检查点

1. key不要写错 component
2. 鼠标放到链接上，左下角显示链接地址 => 看一下这个地址是否正确
   {name: “contactb”}