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 相关文章推荐
JavaScript 动态改变图片大小
Jun 11 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
javascript数组快速打乱重排的方法
Jan 02 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 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之对抗Web扫描器的脚本技巧
2008/10/01 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
文本加密解密
2006/06/23 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
js获取url传值的方法
2015/12/18 Javascript
jQuery事件用法详解
2016/10/06 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
总结js函数相关知识点
2018/02/27 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
vue视频播放暂停代码
2019/11/08 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
Python实现爬取逐浪小说的方法
2015/07/07 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
Python实现购物程序思路及代码
2017/07/24 Python
python发送邮件实例分享
2017/07/28 Python
python 动态加载的实现方法
2017/12/22 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
如何完美的建立一个python项目
2020/10/09 Python
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
Julep官网:美容产品和指甲油
2017/02/25 全球购物
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
预备党员入党自我评价范文
2014/03/10 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
毕业生求职信范文
2014/06/29 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
医生个人年度总结
2015/02/28 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android