UDN-企业互联网技术人气社区

板块导航

浏览  : 1820
回复  : 4

[原生js] Vue.js开发环境搭建

[复制链接]
饼干妹妹的头像 楼主
发表于 2017-1-10 14:09:14 | 显示全部楼层 |阅读模式
本帖最后由 饼干妹妹 于 2017-1-10 14:09 编辑

  Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。本文给大家介绍Vue.js开发环境搭建的详解讲解,感兴趣的朋友一起看看吧

  一、简介
  
  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由于我已经安装好了,跳过

 
2016111010392616.png
 
  2.webpack
 
  1. npm install webpack -g
复制代码
2016111010392618.png
  
  3.安装vue脚手架
   
  1. npm install vue-cli -g
复制代码
  
  测试:
  
  在硬盘上找一个文件夹放工程用的,在终端中进入该目录
   
  1. cd 目录路径
复制代码

  根据模板创建项目
   
  1. vue init webpack-simple 工程名字<工程名字不能用中文>或者创建 vue1.0 的项目vue init webpack-simple#1.0 工程名字<工程名字不能用中文>
复制代码
 
2016111010392619.png
 
  工程目录如图所示:
 
2016111010392620.png
 
  安装项目依赖:
  
  安装 vue 路由模块vue-router和网络请求模块vue-resource
  
  进入该项目执行
  
  1.  npm install vue-router vue-resource --save
复制代码
 
2016111010392721.png
 
  启动项目
  
  1. npm run dev
复制代码
  
  运行就报错  
  1. '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! <a href="mailto:yy-ydh-web@1.0.7">yy-ydh-web@1.0.7</a> 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 <a href="mailto:yy-ydh-web@1.0.7">yy-ydh-web@1.0.7</a> 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
复制代码
 
2016111010392722.png

  这是windows不支持NODE_ENV=development的设置方式
  
  解决方法:
  
  ●安装across-env: npm install cross-env --save-dev
  
  ●在NODE_ENV=xxxxxxx前面添加cross-env就可以了。

  
  运行还是报错:
  
  找不到webpack这个模块
  
  1. 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)
复制代码
2016111010392723.png

  安装该模块:
   
  1. 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
复制代码
  
  安装好后运行又报这个模块的错:
   
  1. 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)
复制代码

  接着继续安装
   
  1. cnpm install bl --save-dev
复制代码

  再运行:
  
  1. npm run dev
复制代码

  访问: http://localhost:8080/ 运行成功
 
2016111010392725.png
 
  原文链接:http://blog.csdn.net/u011781521/article/details/53106934

2016111010392617.png
2016111010392724.png

相关帖子

发表于 2017-1-10 14:09:45 | 显示全部楼层
js是要逆天的节奏js虽然不错,但是天生也是有缺陷,局限性。。。
使用道具 举报

回复

发表于 2017-1-13 01:29:11 | 显示全部楼层
我完全是被标题<<Vue.js开发环境搭建>>吸引过来的
使用道具 举报

回复

发表于 2017-1-13 08:59:54 | 显示全部楼层
(⊙o⊙)…
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部