ch01-vue.js简介、环境搭建及脚手架工具

Tychio 发布于2019-08-20 15:41 / 1267人阅读

摘要：一简介是一个用于构建交互式界面的直观快速和可组合的框架。的兼容性不支持及其以下版本，因为使用了不能模拟的特性。这是简洁的语法和强劲的性能的基础。的组件一个文件由三部分组成，分别体现为个标签。

一、Vuejs简介

Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces.

vue.js是一个用于构建交互式界面的直观、快速和可组合的MVVM框架。易用，只要你会前端开发的“三大件”就可以阅读文档开始用vue.js构建应用；灵活，简单小巧的核心，渐进式技术栈，足以应付任何规模的应用；性能，17kb min+gzip的运行大小，
超快虚拟DOM，最省心的优化。

vue.js的兼容性

Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。

Vue.js 内部使用 ES5 的 Object.defineProperty 来转化对象属性为 getter 和 setter，并在 getter 和 setter 中 emit 事件来实现对对象属性变化的观察。这是 Vue.js 简洁的语法和强劲的性能的基础。IE8 的该方法不能作用于 JS 对象，也没有办法模拟。

vue.js的组件

一个.vue文件由html、js、css三部分组成，分别体现为3个标签：、、。

vue.js的入门项目

todolist

卖座网

二、vue.js环境搭建及脚手架工具

可以使用NPM安装

#最新稳定版本
npm install vue

#最新稳定 CSP兼容版本
npm install vue@csp

node.exe下载地址
git.exe下载地址

#git安装
git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

淘宝 NPM 镜像（不推荐使用，除非网速实在太慢；因为有些依赖的包下载不完全）

#使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

官方命令行工具--vue-cli

# 全局安装 vue-cli
npm install --global vue-cli
#创建一个基于 webpack 模板的新项目
vue init webpack my-project
#切换到项目安装依赖，走你
cd my-project
npm install
npm run dev

安装过程中的提示
了解package.json文件
-devDependencies下为项目依赖的包，其中一系列babel包用来解析[ES6](http://es6.ruanyifeng.com/)
了解webpack
-修改默认端口8080，在webpack.config.js文件中的devServer 添加 port:新端口号
了解vue.js基本项目结构及主要文件
-使用webpack-simple模板：
    myproject
    -node——moudles
    +src
        +assets
            -logo.png
        -App.vue
        -main.js
    -.babelrc
    -.gitignore
    -index.html
    -package.json
    -README.md
    -webpack.config.js
了解vue.js组件的重要选项：data、methods(this)、watch(监听 val oldval)
了解vue.js的模板指令：
- 数据渲染 v-html v-text {{}}
- 模板控制指令 v-if v-show
- 渲染循环列表 v-for 
- 事件绑定  v-on @  
- 属性绑定 v-bind   
了解 es6

v-text 与v-html的不同（看文档）
v-for的使用 （尤其怎么遍历双重数据）
v-bind

踩过的坑：
1、npm install的时候，显示有一个错误：node-sass安装失败；尝试了好几次还是失败，解决方案：用cnpm安装（已经是迫不得已了！）

友情链接

vue.js官方资料:vuejs官网、vuejs github仓库

vue案例：[cody]、 awesome-vue

GPU云服务器云服务器 php开发工具简介迁移工具及费用 php环境及配置教程 JS压缩及混淆工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82413.html

大前端2018现在上车还还得及么

摘要：面向对象三大特征继承性多态性封装性接口。第五阶段封装一个属于自己的框架框架封装基础事件流冒泡捕获事件对象事件框架选择框架。核心模块和对象全局对象，，，事件驱动，事件发射器加密解密，路径操作，序列化和反序列化文件流操作服务端与客户端。第一阶段： HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础：Js基础教程、js内置对...

stormgens 2019-08-01 18:25 评论0 收藏0
大前端2018现在上车还还得及么

摘要：面向对象三大特征继承性多态性封装性接口。第五阶段封装一个属于自己的框架框架封装基础事件流冒泡捕获事件对象事件框架选择框架。核心模块和对象全局对象，，，事件驱动，事件发射器加密解密，路径操作，序列化和反序列化文件流操作服务端与客户端。第一阶段： HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础：Js基础教程、js内置对...

mylxsw 2019-08-22 13:49 评论0 收藏0
可视化爬虫配置chrome插件开发之搭建vue开发环境

摘要：使用开发插件的好处本次开发的插件是抓取配置插件，有很多的表单以及弹出层，如果纯使用的话会有很多动态创建的操作。使用和的语法以及的加载器相配合，可以减少大量动态创建的代码。使用vue开发chrome插件的好处本次开发的插件是抓取配置插件，有很多的form表单以及弹出层，如果纯使用js的话会有很多动态创建dom的操作。使用vue和ES6的import语法以及webpack的html加载...

impig33 2019-08-16 13:25 评论0 收藏0
vue + vuex + koa2开发环境搭建及示例开发

摘要：开发既是一个练习如何在开发环境中写代码的过程，反过来，也是一个验证环境搭建的对不对好不好用的过程。前端调用后端接口示例为突出重点，排除干扰，方便理解。写在前面这篇文章的主要目的是学会使用koa框架搭建web服务，从而提供一些后端接口，供前端调用。搭建这个环境的目的是：前端工程师在跟后台工程师商定了接口但还未联调之前，涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径...

xioqua 2019-08-22 13:56 评论0 收藏0