我们说道,如何利用脚手架(vue-cli)构建一个vue项目,本回书我们一起来学习分析下代码。
回顾下创建后的项目目录:
说明:在*.vue文件,template标签里写html代码,且template直接子级只能有一个标签。style标签里写样式,script里面写js代码
a. 页面:index.html
这个没什么好说的就是一个简单的html页面,这里id='app',是为后面的设置vue作用域有关的。
b. 文件:Hello.vue
c. 文件:App.vue
<router-view></router-view> <!-- 这里是用来展示路由页面内容的,如果想用跳转就用<router-link to='xxx'></router-link> -->
d. 文件:main.js
这个js文件是主页面配置的主入口。主要是利用es6的模块化引入模块。
e. 文件:index.js
这个是配置路由的页面
说明:如果需要增加组件那就在components文件下定义xx.vue文件并编写代码即可,如果需要配置路由就要进行在index.js进行路由“路径”配置,还需要点击跳转就要用到<router-link></router-link>标签了。