根组件App.vue
一个vue页面通常由三部分组成:模板template、脚本script、样式style
模板
只能包含一个父节点,也即,顶层div只能有一个
<router-view>是子路由视图,后面的路由页面显示在此处
脚本
通常用es6写,用export default导出,下面可以包含数据data、生命周期mounted等、方法methods等
样式
通过style标签包裹,默认为影响全局,如需定义作用域只在该组件下起作用,需在标签上加scoped
如要引入外部css文件,首先需要给项目安装css-loader依赖包
入口文件main.js
主要是引入vue框架、根组件及路由配置,并且定义Vue实例
路由配置router
在html中使用router-link组件导航,通过传入to属性指定链接地址,<router-link>默认会渲染成<a>标签
<router-view> 路由出口,路由匹配到的组件会在此处渲染
基于vue-cli的项目开发
vue-cli是vue自身的项目构建工具,可以快速构建vue项目
npm install -g vue-cli
# 创建一个基于 "webpack" 模板的新项目
$ vue init webpack ×××
# 安装依赖
$ cd ×××
$ npm install
生成项目架构文件说明:
-
build中是webpack基本配置文件,开发环境配置文件,生产环节配置文件
-
node_modules是各种依赖模块
-
src中是vue组件及入口文件
-
static中放置静态文件
-
index.html是页面入口文件