vue 框架的安装和入门介绍
Vue 是什么是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 是什么 ?组件是一个 functional 组件,渲染路径匹配到的视图组件。
·
Vue 是什么
是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
<router-view> 是什么 ?
<router-view> 组件是一个 functional 组件,渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>,根据嵌套路径,渲染嵌套组件。
More,please refer to this link ,https://router.vuejs.org/zh-cn/api/router-view.html
Vue 项目的最简单分析(主要是入口分析)
Vue 的安装
step 1 先安装vue 的依赖 Node.js ,请到官网安装最新版本
查看node ,npm 的版本
step 2 利用淘宝的npm 镜像安装相关的依赖
npm install -g cnpm --registry=https://registry.npm.taobao.org
step 3 安装全局 vue-cli 脚手架 ,用于搭建所需要的模板
cnpm install -g vue-cli
step 4 利用vue cmd 创建项目
vue init webpack vue_test
step 5 cd 到 vue_test 下 安装依赖模块
cnpm install
step6 npm run dev 启动 项目
step7 npm run build 用来webpack 打包项目 发布
the section 2
在 项目创建后 ,使用atom 打开项目 后 发现 src 下面有 四个重要的文件和文件夹 分别是
components router App.vue and main.js
但是项目的入口是 index.html
打开 index 会发现有个 div id ='app'
这个 id app 就是上文中的 main js 中的 el: '#app',
同时 本文件还引入了 APP.vue 文件
app 文件 则引入了 router 下 的 index.js 中的路由规则
说明与比较:new Vue() 和 export default {}
在生成、导出、导入、使用 Vue 组件的时候,像我这种新手就会常常被位于不同文件的 new Vue() 和 export default{} 搞得晕头转向。它们含义到底是什么,又有什么异同呢?
首先,Vue 是什么? po 主的理解是 Vue 就是一个构造函数,生成的实例是一个巨大的对象,可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
所以渲染的时候,可以使用构造 Vue 实例的方式来渲染相应的 html 页面:
每个 Vue 应用的起步都是通过构造函数 Vue() 创建 Vue 的根实例:
new Vue({
el: '#app' 绑定id ,挂载点
...
})
一个 Vue 实例是一个ViewModel (MVVM 模式) 。
在实例化 Vue 时,要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
那么 export default {} 又是来干嘛的?
这是在复用组件的时候用到的。假设我们写了一个单页面组件 A 文件,而在另一个文件 B 里面需要用到它,
那么就要用 ES6 的 import/export 语法 ,在文件 A 中定义输出接口 export **,在文件 B 中引入 import **,
然后再生成一个 Vue 实例 new Vue (**),把引入的组件用起来,这样就可以复用组件 A 去配合文件 B 生成 html 页面了。
所以在复用组件的时候,export 和 new Vue 缺一不可。
入门 blog http://blog.csdn.net/haoshidai/article/details/52244670
是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
<router-view> 是什么 ?
<router-view> 组件是一个 functional 组件,渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>,根据嵌套路径,渲染嵌套组件。
More,please refer to this link ,https://router.vuejs.org/zh-cn/api/router-view.html
Vue 项目的最简单分析(主要是入口分析)
Vue 的安装
step 1 先安装vue 的依赖 Node.js ,请到官网安装最新版本
查看node ,npm 的版本
step 2 利用淘宝的npm 镜像安装相关的依赖
npm install -g cnpm --registry=https://registry.npm.taobao.org
step 3 安装全局 vue-cli 脚手架 ,用于搭建所需要的模板
cnpm install -g vue-cli
step 4 利用vue cmd 创建项目
vue init webpack vue_test
step 5 cd 到 vue_test 下 安装依赖模块
cnpm install
step6 npm run dev 启动 项目
step7 npm run build 用来webpack 打包项目 发布
the section 2
在 项目创建后 ,使用atom 打开项目 后 发现 src 下面有 四个重要的文件和文件夹 分别是
components router App.vue and main.js
但是项目的入口是 index.html
打开 index 会发现有个 div id ='app'
这个 id app 就是上文中的 main js 中的 el: '#app',
同时 本文件还引入了 APP.vue 文件
app 文件 则引入了 router 下 的 index.js 中的路由规则
说明与比较:new Vue() 和 export default {}
在生成、导出、导入、使用 Vue 组件的时候,像我这种新手就会常常被位于不同文件的 new Vue() 和 export default{} 搞得晕头转向。它们含义到底是什么,又有什么异同呢?
首先,Vue 是什么? po 主的理解是 Vue 就是一个构造函数,生成的实例是一个巨大的对象,可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
所以渲染的时候,可以使用构造 Vue 实例的方式来渲染相应的 html 页面:
每个 Vue 应用的起步都是通过构造函数 Vue() 创建 Vue 的根实例:
new Vue({
el: '#app' 绑定id ,挂载点
...
})
一个 Vue 实例是一个ViewModel (MVVM 模式) 。
在实例化 Vue 时,要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
那么 export default {} 又是来干嘛的?
这是在复用组件的时候用到的。假设我们写了一个单页面组件 A 文件,而在另一个文件 B 里面需要用到它,
那么就要用 ES6 的 import/export 语法 ,在文件 A 中定义输出接口 export **,在文件 B 中引入 import **,
然后再生成一个 Vue 实例 new Vue (**),把引入的组件用起来,这样就可以复用组件 A 去配合文件 B 生成 html 页面了。
所以在复用组件的时候,export 和 new Vue 缺一不可。
入门 blog http://blog.csdn.net/haoshidai/article/details/52244670
更多推荐
已为社区贡献4条内容
所有评论(0)