Vue.js开发环境搭建


Posted in Javascript onNovember 10, 2016

一、简介

Vue.js 是什么

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

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

Vue.js是一个MVVM模式的框架,如果读者有angular经验,一定能够很快入门Vue的

vue.js的特点:

易用: 已经会了HTML,CSS,JavaScript?即刻阅读指南即可开始构建应用!

灵活: 简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。

高效: 16kb min+gzip 的运行大小,超快虚拟 DOM ,最省心的优化

二、环境搭建

vue推荐开发环境:

Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言

npm: Nodejs下的包管理器

webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。

vue-cli: 用户生成Vue工程模板

开始安装:

1.nodejs由于我已经安装好了,跳过

Vue.js开发环境搭建

2.webpack

npm install webpack -g

Vue.js开发环境搭建

3.安装vue脚手架

npm install vue-cli -g

Vue.js开发环境搭建

测试:

在硬盘上找一个文件夹放工程用的,在终端中进入该目录

cd 目录路径

根据模板创建项目

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

Vue.js开发环境搭建

工程目录如图所示:

Vue.js开发环境搭建

安装项目依赖:

安装 vue 路由模块vue-router和网络请求模块vue-resource

进入该项目执行

npm install vue-router vue-resource --save

Vue.js开发环境搭建

启动项目

npm run dev

运行就报错

'NODE_ENV' 不是内部或外部命令,也不是可运行的程序或批处理文件。npm ERR! Windows_NT 6.1.7601npm ERR! argv "D:\\nodejs\\node.exe" "D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"npm ERR! node v4.0.0-rc.5npm ERR! npm v2.14.2npm ERR! code ELIFECYCLEnpm ERR! yy-ydh-web@1.0.7 start: `npm run clear&& NODE_ENV=development && webpack-dev-server --host 0.0.0.0 --devtool eval --progress --color --profile`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the yy-ydh-web@1.0.7 start script 'npm run clear&& NODE_ENV=development && webpack-dev-server --host0.0.0.0 --devtool eval --progress --color --profile'.npm ERR! This is most likely a problem with the yy-ydh-web package,npm ERR! not with npm itself.npm ERR! Tell the author that this fails on your system:npm ERR! npm run clear&& NODE_ENV=development && webpack-dev-server --host 0.0.0.0 --devtool eval --progress --color --profilenpm ERR! You can get their info via:npm ERR! npm owner ls yy-ydh-webnpm ERR! There is likely additional logging output above.npm ERR! Please include the following file with any support request:npm ERR! D:\workspace\node_modules\yy-ydh-web\npm-debug.log

Vue.js开发环境搭建

这是windows不支持NODE_ENV=development的设置方式

解决方法:

●安装across-env: npm install cross-env --save-dev

●在NODE_ENV=xxxxxxx前面添加cross-env就可以了。

运行还是报错:

找不到webpack这个模块

module.js:457 throw err; ^Error: Cannot find module 'webpack' at Function.Module._resolveFilename (module.js:455:15) at Function.Module._load (module.js:403:25) at Module.require (module.js:483:17) at require (internal/module.js:20:19) at Object.<anonymous> (D:\vue_work\fendo\webpack.config.js:2:15) at Module._compile (module.js:556:32) at Object.Module._extensions..js (module.js:565:10) at Module.load (module.js:473:32) at tryModuleLoad (module.js:432:12) at Function.Module._load (module.js:424:3)

安装该模块:

ccnpm 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

安装好后运行又报这个模块的错:

Error: Cannot find module 'bl' at Function.Module._resolveFilename (module.js:455:15) at Function.Module._load (module.js:403:25) at Module.require (module.js:483:17) at require (internal/module.js:20:19) at Object.<anonymous> (C:\Users\fendo\AppData\Roaming\npm\node_modules\npm\node_modules\request\request.js:9:10) at Module._compile (module.js:556:32) at Object.Module._extensions..js (module.js:565:10) at Module.load (module.js:473:32) at tryModuleLoad (module.js:432:12) at Function.Module._load (module.js:424:3)

接着继续安装

cnpm install bl --save-dev

再运行:

npm run dev

Vue.js开发环境搭建

访问: http://localhost:8080/ 运行成功

Vue.js开发环境搭建

Javascript 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
微信小程序实现评论功能
Nov 28 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 Javascript
关于JavaScript轮播图的实现
Nov 20 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 #Javascript
javascript中的后退和刷新实现方法
Nov 10 #Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 #Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 #Javascript
EasyUI 结合JS导出Excel文件的实现方法
Nov 10 #Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
Nov 10 #Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 #Javascript
You might like
PHP的运行机制与原理(底层)
2015/11/16 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
PyQT实现多窗口切换
2018/04/20 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
Python批量启动多线程代码实例
2020/02/18 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
大学生的四年学习自我评价
2013/12/13 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
立志成才演讲稿
2014/09/04 职场文书
幼师大班个人总结
2015/02/13 职场文书
XX部保密工作制度范本
2019/08/27 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang