当前位置：首页 > 资讯 > 技术文档

Vue.js开发环境搭建

时间：2022-05-03 04:33 编辑：来源：阅读：
扫一扫，手机访问

摘要：Vue.js开发环境搭建

[b]一、简介[/b] [b]Vue.js 是什么[/b][b] [/b] Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的[b]渐进式框架[/b]。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。 Vue.js 的目标是通过尽可能简单的 API 实现[b]响应的数据绑定[/b]和[b]组合的视图组件[/b]。 Vue.js是一个MVVM模式的框架，如果读者有angular经验，一定能够很快入门Vue的 [b]vue.js的特点:[/b] 易用：已经会了HTML,CSS,JavaScript？即刻阅读指南即可开始构建应用！灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。高效： 16kb min+gzip 的运行大小,超快虚拟 DOM ,最省心的优化 [b]二、环境搭建[/b] [b]vue推荐开发环境:[/b] Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nodejs下的包管理器 webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。 vue-cli: 用户生成Vue工程模板 [b]开始安装:[/b] [b]1.nodejs由于我已经安装好了,跳过[/b][b] [/b] [b][img]http://files.jb51.net/file_images/article/201611/2016111010392616.png[/img] [/b] [b]2.webpack[/b][b] [/b]

npm install webpack -g

[img]http://files.jb51.net/file_images/article/201611/2016111010392617.png[/img] [b]3.安装vue脚手架[/b][b] [/b]

npm install vue-cli -g

[b][img]http://files.jb51.net/file_images/article/201611/2016111010392618.png[/img] [/b] [b]测试:[/b] 在硬盘上找一个文件夹放工程用的，在终端中进入该目录

cd 目录路径

根据模板创建项目

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

[img]http://files.jb51.net/file_images/article/201611/2016111010392619.png[/img] 工程目录如图所示: [img]http://files.jb51.net/file_images/article/201611/2016111010392620.png[/img] [b]安装项目依赖:[/b] 安装 vue 路由模块vue-router和网络请求模块vue-resource 进入该项目执行

npm install vue-router vue-resource --save

[img]http://files.jb51.net/file_images/article/201611/2016111010392721.png[/img] [b]启动项目[/b]

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

[img]http://files.jb51.net/file_images/article/201611/2016111010392722.png[/img] 这是windows不支持NODE_ENV=development的设置方式 [b]解决方法:[/b] [b]●安装across-env: npm install cross-env --save-dev[/b] [b]●在NODE_ENV=xxxxxxx前面添加cross-env就可以了。[/b] [b]运行还是报错:[/b][b] [/b] 找不到webpack这个模块[b] [/b]

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)

[img]http://files.jb51.net/file_images/article/201611/2016111010392723.png[/img]

安装该模块:

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

[img]http://files.jb51.net/file_images/article/201611/2016111010392724.png[/img] 访问: http://localhost:8080/ 运行成功 [img]http://files.jb51.net/file_images/article/201611/2016111010392725.png[/img]

全部评论(0)

上一篇：nodejs教程之入门
下一篇：windows下vue-cli及webpack搭建安装环境

资讯排行榜
更多>>