vue-cli相关知识整理

根组件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是页面入口文件