vue-cli相关知识整理
2017-11-22 15:30
246 查看
根组件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是页面入口文件
相关文章推荐
- putty相关知识整理
- JVM的相关知识整理和学习
- Flume相关知识整理
- jQuery相关知识整理(一)
- 实现JSP的TAG标签库的相关知识(待整理)
- HTTP网络连接相关知识整理(三):网络错误异常
- vue-cli的webpack模版,相关配置文件dev-server.js与webpack.config.js配置解析
- Android签名相关知识整理
- C#:装箱和拆箱相关知识整理
- java中的字符串相关知识整理
- crontab 相关知识整理
- Erlang相关知识整理
- 卫星定位与导航相关知识的整理
- 【知识整理】利用html5 canvas技术实现反差式对焦功能的相关探讨
- 手机操作系统知识整理(一):CPU相关概念详解
- session相关知识的收集于整理
- PSAM卡相关知识整理
- 链表的相关知识整理
- Vue-cli快速上手文档整理
- JVM的相关知识整理和学习