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

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

1
2
3
4
由于之前的路由的话,嵌套路由需要使用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";

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