Vue路由的使用

Vue

1、Vue项目初始化

创建方式

1、博客：https://blog.csdn.net/weixin_37841566/article/details/109462083
2、创建Vue2版本  
3、创建Vue3版本  
   创建方式：vue create “项目名” 或 vue init webpack-simple “项目名”(项目名不要用大写字母)  创建一个简单的项目没有pulic目录
4、也可使用Vue ui命令 创建利用视图可视化页面创建项目。

创建会遇到的问题

1. 创建项目

   

   

2、Vue路由

第一步创建项目

第二步安装Vue-router

1、命令
   cnpm install vue-router --save
加-s的作用：会在package.json的dependencies属性下添加vue-router
2、详解博客
https://www.cnblogs.com/shimily/articles/7760595.html

第三步测试

1、创建组件
  -- Home.vue
  -- Product.vue
2、创建管理路由的
  -- router.js文件并配置路由
3、在入口文件main.js
  -- 引入vue-router和router.js
4、注意在创建VueRouter实列
  -- 实列属性名一定是routes否则路由不起作用
博客详见：https://www.cnblogs.com/xiaoliang-/p/12935727.html

3、路由之间的参数传递

（1）、设置参数

    通过路由表设置参数

（2）、传参

（3）、接收参数

4、组件中的data为什么必须是个函数不是对象呢！

1、博客：https://www.cnblogs.com/master-yi/p/12593503.html
2、组件是可复用的vue实例、一个组件被创建好，就可能被用到各个地方，不管组件被复用多少次，组件中的data数据都应该相互隔离。

5、Vue组件样式scoped属性

1、博客：https://www.cnblogs.com/yangsg/p/10620414.html
2、介绍：
   --- Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。
   --- vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素 

6、关于资源打包

1、关于vue静态资源不显示
  -- 在开发环境下要使用静态资源
     先通过npm run build命令创建dist文件夹，然后将静态资源放入，再在vue代码中从dist目录去文件即可

7、创建webpack项目

1、创建项目

创建方式：vue init webpack myVue2    创建的是：Vue-cli2

2、安装依赖

1、安装vue-router
   cnpm install vue-router --save-dev
2、安装element-ui
   cnpm i element-ui -S
3、安装SASS加载器
   cnpm insatll sass-loader node-sass --save-dev
4、安装vue axios
   cnpm insatll --save axios vue-axios
5、cnpm insatll

3、路由配置

创建组件

配置路由

入口文件配置

8、使用element

1、官网

中文官网地址:https://element.eleme.cn/#/zh-CN