Vue.js的使用

Hokori2020-06-092024-10-31

vue.js是前端里很火的一个框架，它是一个渐进式Javascript框架，在官网上即可以下载到vue.js的包，将其当作普通的javascript文件进行引入之后即可直接进行vue的开发了，vue的语法和微信小程序之前差不多，之前我已经写过微信小程序了，因此这里就不强调语法什么的了，讲一下vue项目的结构吧，vue项目的搭建需要使用npm去构建vue，然而npm是基于node.js的，因此需要先安装好node.js之后再用npm进行构建vue，这里我是使用的IDEA的环境，因此直接下载了vue的插件，就无需构建了，比较傻瓜式的操作就可以了，考虑到现在我应该先熟悉该怎么使用它，再去学会如何构建它，因此我这里就不讲了，到后面单开一章vue/cli来专门讲解，回到vue，vue项目的目录结构是如下所示：
├── README.md 项目介绍
├── public
| ├── index.html 入口页面
├── package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── src 源码目录
│ ├── main.js 入口js文件
│ ├── app.vue 根组件
│ ├── components 公共组件目录
│ │ └── title.vue
│ ├── assets 资源目录，这里的资源会被wabpack构建
│ │ └── images
│ │ └── logo.png
其中呢，有些人还有build文件夹和config文件夹，不知我这为什么没有，可能是因为vue/cli版本不对吧，这个也放到vue/cli去吧，就像上面写的app.vue是根组件，main.js是入口js文件，运行npm run build之后会出现一个dist文件夹，那里可以用来存放css文件和js文件，src目录用来存放各种源码，components目录专门用来存放组件的，当然，可以在src里面创建自己喜欢的文件夹存放专门的一类文件。
vue项目让我感觉有点懵逼的是router路由的设置，不过现在我大概也捋清楚了router的用法了，
router一般会单独开一个文件写，而代码如下：

import Vue from 'vue'
import VueRouter from "vue-router";
import index from "@/pages/index/index";
import diancan from "@/pages/diancan/diancan";
import purchase from "@/pages/purchase/purchase";
import ucenter from "@/pages/ucenter/ucenter";

Vue.use(VueRouter)
const routes = [
{
    path: '/',
    component: index
},
{
    path: '/index',
    name: 'index',
    component: index,
    children: []
},
{
    path: '/diancan',
    name: 'diancan',
    component: diancan
},
{
    path: '/purchase',
    name: 'purchase',
    component: purchase
},
{
    path: '/ucenter',
    name: 'ucenter',
    component: ucenter
}
];
const router = new VueRouter({
    routes
})
export default router

上面由于有嵌套路由，因此使用了vue-router库，而下面呢，是我在写项目时候顺便写的:
###动态路线匹配，在cg，我对cg.vue做的是动态路线匹配，其中id是需要穿的参数，而这里是用的json串的格式来进行绑定的。

1	而to也变成了 :to，这样才可以使用动态路线匹配

关于路由问题的思考

1、main.js是项目入口文件，所以需要分配路由的话一般都在里面写。
2、App.vue是最开始加载的一个根组件，所以其在网页显示的地址一般都是http://localhost:8080/#/
3、同级路由之间可以切换，但是从该级别路由进入到下一级路由的组件，该级别的组件仍旧会保留，这点在嵌套路由中可以看出
4、嵌套路由的话，需要使用vue-router插件

###关于在vue中如何使用插件

由于之前的路由的话，嵌套路由需要使用vue-router插件，因此是之前已经有使用过了，但是这里再做一次具体的总结：
1、引入插件包
2、调用Vue.use(MyPlugin)以使用插件。
3、这些步骤需要在new Vue({})之前完成。

###如何在vue中引入bootstrap.css

1
2
3

只需要将bootstrap的css包里的文件全部放到vue项目的dist/css文件夹下，然后在main.js中
使用import引入bootstrap.css即可，代码如下：
import "../dist/css/bootstrap.css";

其余诸如组件间通信，其实和小程序差不多，不过这里还是写一下好了