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代码
Aug 13 Javascript
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
javascript之Partial Application学习
Jan 10 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 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可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
PHP函数超时处理方法
2016/02/14 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
python里运用私有属性和方法总结
2019/07/08 Python
如何在Python对Excel进行读取
2020/06/04 Python
python三引号如何输入
2020/07/06 Python
python 实现波浪滤镜特效
2020/12/02 Python
税务专业毕业生自荐信
2013/11/10 职场文书
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
教师旷工检讨书
2014/01/18 职场文书
写给导师的自荐信
2015/03/06 职场文书
社区党务工作总结2015
2015/05/19 职场文书
党员证明模板
2015/06/19 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
MySQL 全文检索的使用示例
2021/06/07 MySQL
Python jiaba库的使用详解
2021/11/23 Python