Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 从根本上采用最小成本、渐进增量的设计。Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动。
一、运行环境搭建Vue引入方式一般有三种:
第一种CDN引入
第二种使用 NPM 安装
$ npm install vue//安装最新稳定版
第三种搭建脚手架CLI
所谓脚手架是通过webpack搭建的开发环境,用于快速搭建大型单页面应用程序。能够为现代前端开发的工作流程,带来持久强力的基础架构。只需几分钟,就可以建立并运行一个带有“热重载、保存时代码检查以及可直接用于生产环境的构建配置”的项目。
首先必须先安装node.js,Node.js 在 0.6.3 版本开始内建npm,所以安装好node.js后,npm也就装好。然后在通过git bash 操作以下命令行:
$ node -v//检查是否已经装好了node
$ npm -v//检查是否已经装好了npm
$ npm install --global vue-cli //安装 vue-cli
$ vue init webpack project//进入目标文件夹创建一个新项目
$ cd project//进入新项目
$ npm install//安装package.json中依赖的node_modules
$ npm run dev//运行该项目
对于大陆用户,建议将npm的注册表源设置为国内的镜像,可以大幅提升安装速度。推荐使用这种安装脚手架。
npm config set registry https://registry.npm.taobao.org//配置淘宝镜像
npm config get registry//验证是否成功
npm install -g cnpm --registry=https://registry.npm.taobao.org//安装cnpm
cnpm install -g vue-cli//cnpm安装脚手架
vue init webpack my-project
cd my-project
cnpm install
cnpm run dev
最后打开http://localhost:8080,就出现下面的页面,标志着脚手架搭建完成了。
脚手架搭建完成后,project里面各个文件夹及文件,如下图:
1.src文件流程介绍
index.html(入口文件)=>main.js=>App.vue(根组件),根组件中模板内容就直接插入到入口文件中#app处,然后再将页面呈现出来。
2.根组件App介绍
主要由三部分组成,分别为模板(html结构),行为(处理逻辑)和样式(解决样式)
三、vue组件嵌套vue组件嵌套是指写好的子组件如何与根组件取得关联,通常可以分为组件全局定义和组件局部定义,后者比较常见。
1.组件全局定义
一般以下两个步骤:
①main.js引入子组件
②App.vue组件中template调用
//main.js
import Vue from 'vue'
import App from './App'
import Users from "./components/Users";//引入子组件Users
Vue.config.productionTip = false
Vue.component("users",Users);//自定义名字便于App.vue组件调用,后者为组件名
new Vue({
el: '#app',
components: { App },
template: ''
})
//App.vue组件
<div>
//在这里调用,自定义名字是小写的
</div>
2.组件局部定义
一般以下三个步骤:
①import引入子组件
②export default注册子组件
③template模板中加入子组件
接下来我们通过一个例子,说明父组件如何向子组件传递值:在子组件Users.vue中如何获取父组件App.vue中的数据 users:["Henry","Bucky","Emily"]
1.创建子组件,在src/components/文件夹下新建一个Users.vue子组件
2.在App.vue中注册Users.vue组件,并在template中加入users标签
//App.vue父组件
<div>
//前者自定义名称便于子组件调用,后者要传递数据名
</div>