Vue In Action 实战Vue–从index开始(四)

9 2月

index.js

index.js 内容非常简单, 毕竟这只是一个简单的模板

首先引入 Vue 是必要的, 这是核心包.

其次是引入 router, 这是我们引入的 vue插件 vue-router. 可以在根目录 package.json 中看到和配置版本. 它主要的功能就是配置路由, 哪些 url 能指向和访问哪些页面.后面会再聊到 router.

再来是引入 index.less 样式文件, 一些 common 的样式可以放在这里.

最后就是如何开始用 Vue 的代码了, 初始化一个 Vue 实例之后, 定义了element 的 id 为 root, 放入 router, 最后定义了渲染.

index.html

这是入口页面, 所有的页面变换和渲染都在这里面进行. 每一次 route 的改变都只是改变了element id 为 root( index.js 中定义的 )的div内容

这其实就是一个 html 的大容器的感觉, 所有的活动都在容器中进行, 当然写在index.html中的所有内容都是 common 的.

index.router.js

首先引入Vue 核心包和 vue-router 插件, 因为我们需要让 Vue 知道, 我们使用了 vue-router 这个插件, 即后面的第一行代码

然后引入主模板, Main.vue, 这是因为后面我们要配置一个路由, 根目录 / 跳往这个模板.

可以看到我们配置了2个路由, 一个指向根路径, 一个是当出现未配置的其他路径的时候, 我们默认跳往根路径. 其实生成环境我们是应该跳往404模板的. 这里只是一个 demo 空项目, 就姑且全部跳往主页面吧!

index.spec.js

index.js 的单元测试文件, 所有以 *.spec.js 结尾的都是测试文件. 不再过多介绍.

Main.vue

我们可以看到这个主模板, 也全是各种自定义模板嵌套而来的, 这也是 vue 比较推荐的做法, 组件化, components, 做法和 react 很像.

在这里你可以添加必要的 js 文件, 也可以添加一些 css 文件.

查看 main.js, 看看是如何工作的:

引入需要用到的模板, 然后定义名称, 仅此而已. 非常简单. 后面的模板都按照类似的做法就可以了.

上一篇: VUE 项目结构和优化

下一篇:Vue html 渲染和数据绑定

发表评论

电子邮件地址不会被公开。