Vue期末项目开发流程(二)

目录

1.VueRouter的使用

2.删除不需要的文件和内容

3.在src文件下新建一个style文件夹,在文件夹中创建文件base.less 用于存放全局样式

4.为清除内容和边框之间的间隙,清除内外边距 

 5.在main.js文件中引入全局样式

 6.通过终端安装vant组件

 7.在main.js文件中导入组件

​编辑  8. 使用组件

---

1.VueRouter的使用

在router文件中,导入视图页面有两种方式分别是:

•  import 自定义页面名 from 页面路径   然后在component前使用：直接写这个自定义的页面名
• ()  =>  import  (视图路径)

1.1<router-link-exact-active>     完成路由匹配

1.1.1在App.vue文件里的style区域设置样式

1.1.2.在router文件夹中的index.js文件中输入属性path和component

1.1.3.通过<router-link to="" ></router-link>标签进行绑定

1.1.4.运行项目后分别点击 Home 和 About 

 

 可以看到当我们点击文字时对应的class类名会更变为 router-link-exact-active 并且我们在App.vue中设置的样式也同步渲染

2.删除不需要的文件和内容

3.在src文件下新建一个style文件夹,在文件夹中创建文件base.less 用于存放全局样式

4.为清除内容和边框之间的间隙,清除内外边距 

 5.在main.js文件中引入全局样式

 6.通过终端安装vant组件

 7.在main.js文件中导入组件

7.1 全部导入(引入所有组件会增加代码包体积，因此不推荐这种做法)

7.2 手动按需导入(在不使用插件的情况下，可以手动引入需要的组件)

 

7.3 自动按需引入组件(推荐) 

7.3.1 安装插件

7.3.2 在babelrc 中添加配置

7.3.3 使用组件

  8. 使用组件