vue2.5



Jinkey原创
感谢 showonne、yubang 技术指导
Demo 地址:
http://demo.jinkey.io/vue2
源码:
https://github.com/Jinkeycode/vue2-example

Vue2 教程：https://www.runoob.com/vue2/vue-tutorial.html

Vue 是一个前端框架，特点是
数据绑定

比如你改变一个输入框 Input 标签的值，会自动同步更新到页面上其他绑定该输入框的组件的值


/blockquote>

blockquote>

页面上小到一个按钮都可以是一个单独的文件.vue，这些小组件直接可以像乐高积木一样通过互相引用而组装起来

/blockquote>

hr>

Homebrew 1.0.6(Mac)、Node.js 6.7.0、npm 3.10.3、webpack 1.13.2、vue-cli 2.4.0、Atom 1.10.2

hr>

打开终端运行以下命令:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"  

brew install nodejs 

用 npm install npm@3.10.3 更新 npm 版本报错:

blockquote>

(node:42) fs: re-evaluating native module sources is not supported.

/blockquote>

解决办法:

在官网下载6.70的安装包再安装一次(刚刚相当于帮你配置好环境变量，现在再安装一次升级到最新的 npm)

blockquote>

• 好像以前官网的安装包不会自动配置环境变量的，由于我电脑上之前安装过 nodejs 所以环境变量已经配置好了，不知道现在的安装包会不会自动配置环境变量。

/blockquote>

Windows 下直接下载安装包即可

linux 下可以使用 apt-get（ubuntu） 或 yum（centos） 命令安装。

具体可参考：http://www.runoob.com/nodejs/nodejs-install-setup.html

sudo chmod -R 777 /usr/local/lib/node_modules/ 

安装淘宝镜像

大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。

 npm install -g cnpm --registry=https://registry.npmmirror.com  

这样就可以使用 cnpm 命令来安装模块了：

 cnpm install [name]  

cnpm install webpack -g 

 npm install vue-cli -g  

 cd 目录路径  

blockquote>

vue init webpack-simple 工程名字<工程名字不能用中文>
或者创建 vue1.0 的项目
vue init webpack-simple#1.0 工程名字<工程名字不能用中文>

/blockquote>

会有一些初始化的设置，如下输入:

直接回车默认(然后会下载 vue2.0模板，这里可能需要连代理)

直接回车默认

直接回车默认

写你自己的名字

工程目录如图所示:

hr>

一定要从官方仓库安装，npm 服务器在国外所以这一步安装速度会很慢。

 npm install  

不要从国内镜像cnpm安装

(会导致后面缺了很多依赖库)

 cnpm install  

 cnpm install vue-router vue-resource --save  

npm run dev 

blockquote>

【重点】后来发现这些坑是由于 npm 不是最新的版本3.10.2， 用 npm 3.9.5就会出现以下坑
解决办法: 请运行以下命令
npm update -g

/blockquote>

报错

 Error: Cannot find module 'opn' Error: Cannot find module 'webpack-dev-middleware' Error: Cannot find module 'express' Error: Cannot find module 'compression' Error: Cannot find module 'sockjs' Error: Cannot find module 'spdy' Error: Cannot find module 'http-proxy-middleware' Error: Cannot find module 'serve-index'  

如果你用的是老版本的 vue-cli 还可能报其他错误，需要更新一下 vue-cli

npm update vue-cli 

然后可以查看一下当前全局 vue-cli 的版本

 npm view vue-cli  

安装一下这个依赖到工程开发环境

cnpm install opn --save-dev cnpm install webpack-dev-middleware --save-dev cnpm install express --save-dev cnpm install compression --save-dev cnpm install sockjs --save-dev cnpm install spdy --save-dev cnpm install http-proxy-middleware --save-dev cnpm install serve-index --save-dev cnpm install connect-history-api-fallback --save-dev 

再启动项目，报错

ERROR in https://www.runoob.com/w3cnote/src/main.js Module build failed: Error: Cannot find module 'babel-runtime/helpers/typeof' at Function.Module._resolveFilename (module.js:440:15) at Function.Module._load (module.js:388:25) at Module.require (module.js:468:17) at require (internal/module.js:20:19) at Object.<anonymous> (/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.6.17.0@babel-core/lib/transformation/file/index.js:6:16) at Module._compile (module.js:541:32) at Object.Module._extensions..js (module.js:550:10) at Module.load (module.js:458:32) at tryModuleLoad (module.js:417:12) at Function.Module._load (module.js:409:3) @ multi main ERROR in https://www.runoob.com/w3cnote/~/.2.1.0-beta.8@webpack-dev-server/client/socket.js Module not found: Error: Can't resolve 'sockjs-client' in '/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.2.1.0-beta.8@webpack-dev-server/client' @ https://www.runoob.com/w3cnote/~/.2.1.0-beta.8@webpack-dev-server/client/socket.js 1:13-37 @ https://www.runoob.com/w3cnote/~/.2.1.0-beta.8@webpack-dev-server/client?http://localhost:8080 

安装一下 babel-runtime

cnpm install babel-helpers --save-dev 

启动项目，再次报错

 Module build failed: Error: Cannot find module 'babel-helpers' Module build failed: Error: Cannot find module 'babel-traverse' Module build failed: Error: Cannot find module 'json5' Module build failed: Error: Cannot find module 'babel-generator' Module build failed: Error: Cannot find module 'detect-indent' Module build failed: Error: Cannot find module 'jsesc'  

找不到依赖那就再安装一下

 cnpm install babel-helpers --save-dev cnpm install babel-traverse --save-dev cnpm install json5 --save-dev ...不写了，请把全部把旧的环境全部清除，更新到最新版本  

hr>

遇到

Module build failed: Error: Cannot find module '模块名' 

那就安装

 cnpm install 模块名 --save-dev(关于环境的，表现为npm run dev 启动不了) cnpm install 模块名 --save(关于项目的，比如main.js，表现为npm run dev 成功之后控制台报错) 比如escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list  

输入完命令会自动启动浏览器，如果默认打开 IE 不行

 npm run dev  

自动启动浏览器就会看到这个界面了。

hr>

推荐 Atom 打开项目，需要安装 Vue 语法高亮的插件

img decoding="async" src="https://www.runoob.com/wp-content/uploads/2016/10/-9307--bc9565e738d4d41e.jpg">

img decoding="async" src="https://www.runoob.com/wp-content/uploads/2016/10/-3231--00c7dced26f9c972.jpg">

img decoding="async" src="https://www.runoob.com/wp-content/uploads/2016/10/-8912--22ac84c532a7be20.jpg">

br>这里有两个坑:

br>

第一

。一个组件下只能有一个并列的 div，可以这么写，所以复制官网示例的时候只要复制 div 里面的内容就好。

br>

img decoding="async" src="https://www.runoob.com/wp-content/uploads/2016/10/-1110--b219f2ef37474fe1.jpg">

img decoding="async" src="https://www.runoob.com/wp-content/uploads/2016/10/-5135--4343b062c2b504aa.jpg">

第二

。数据要写在 return 里面而不是像文档那样子写

br>

img decoding="async" src="https://www.runoob.com/wp-content/uploads/2016/10/-6051--5da5ffe18910e72f.jpg">

img decoding="async" src="https://www.runoob.com/wp-content/uploads/2016/10/-8316--9ba19c39.jpg">

br>

img decoding="async" src="https://www.runoob.com/wp-content/uploads/2016/10/-8515--55342acee9153c98.png">

br>在工程目录下创建文件夹，并在文件夹下创建一个 并写仿照 App.vue 的格式和前面学到的知识写一个组件。

br>

img decoding="async" src="https://www.runoob.com/wp-content/uploads/2016/10/-7423--bb5a6ba776b17a94.jpg">

br>

第一步，引入

。在标签内的第一行写

第二步，注册

。在标签内的 data 代码块后面加上 components: { firstcomponent }。

记得中间加英文逗号!!!

第三步，使用

。

br>在内加上<firstcomponent></firstcomponent>

img decoding="async" src="https://www.runoob.com/wp-content/uploads/2016/10/-4231--e194eef69.jpg">

br>

img decoding="async" src="https://www.runoob.com/wp-content/uploads/2016/10/-6951--03fd1ee6.png">

br>

img decoding="async" src="https://www.runoob.com/wp-content/uploads/2016/10/-9448--3fb25f5fd8b8c8d2.jpg">

img decoding="async" src="https://www.runoob.com/wp-content/uploads/2016/10/-5461--cf956a57f849e8c3.png">

浏览器地址已经变更

。

br>

img decoding="async" src="https://www.runoob.com/wp-content/uploads/2016/10/-2400--958ea2c6a5933db6.png">

img decoding="async" src="https://www.runoob.com/wp-content/uploads/2016/10/-2753--6139d6fbb1cbcb69.jpg">

br>使用命令行安装

br>添加一个列表:

br>然后在 data 后面加入加入钩子函数 (详细请参照官方文档关于 vue 生命周期的解析)，

data 和 mount 中间记得记得加逗号

br>

img decoding="async" src="https://www.runoob.com/wp-content/uploads/2016/10/-4577--4871af2f1af20ca5.png">

vue-router 2.0

http://router.vuejs.org/zh-cn/index.html

br>本来想给大家介绍 Vux 的，因为他用的是微信的 WeUI 设计规范，对于开发微信小程序或者微信内的网页非常和谐，但由于写这篇文章的时候 Vux 还不支持 vue2.0，只能用别的框架了。

br>命令行安装 ElementUI (此处某公司的人应该发红包了...)

br>报错是由于我们引入了这个 CSS 文件，但是 webpack 打包的时候无法识别并转换成 js，所以就需要配置才能读取 css 和字体文件，运行命令安装下面三个东西(如果之前安装过就不需要了)

img decoding="async" src="https://www.runoob.com/wp-content/uploads/2016/10/-6825--0f8758be535e7ccd.png">

http://element.eleme.io/#/component/layout

npm run build

又报错了...orz

 ERROR in build.js from UglifyJs SyntaxError: Unexpected token punc «(», expected punc «:» [build.js:32001,6] 把node_modules/.bin/cross-env里的 require('https://www.runoob.com/dist')(process.argv.slice(2)); 

后来发现直接运行 webpack 命令就可以打包了

webpack --color --progress

接着把 index.html 和整个 dist 目录丢到服务器就可以了。

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue 学习起来非常简单，本教程基于 Vue3 以上版本测试。

版权声明：

本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.mushiming.com/mjsbk/1700.html