Vue.js开发环境搭建

作者:fendo 时间:2024-05-28 15:55:38 

一、简介

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)

Vue.js开发环境搭建

安装该模块:


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开发环境搭建

来源:http://blog.csdn.net/u011781521/article/details/53106934

标签:vuejs,环境,搭建
0
投稿

猜你喜欢

  • php实现贪吃蛇小游戏

    2024-05-02 17:16:36
  • 如何将sql执行的错误消息记录到本地文件中实现过程

    2024-01-22 06:50:37
  • Babylon使用麦克风并处理常见问题解决

    2024-04-29 13:25:53
  • 基于python神经卷积网络的人脸识别

    2023-11-03 17:37:17
  • 利用Python编写的实用运维脚本分享

    2022-07-15 21:32:46
  • Python切片知识解析

    2022-06-07 06:31:58
  • IDEA开启Run Dashboard的配置详解

    2023-03-16 10:34:51
  • 个性类文字制作ps教程

    2008-07-17 12:45:00
  • C# Oracle数据库操作类实例详解

    2024-01-19 07:21:29
  • 微信小程序图片左右摆动效果详解

    2023-08-09 13:34:31
  • 文字解说Golang Goroutine和线程的区别

    2023-10-15 18:56:36
  • MyBatis-plus+达梦数据库实现自动生成代码的示例

    2024-01-16 03:41:42
  • 5种禁用html页面的缓存方法

    2007-09-30 12:12:00
  • Python中BeautifulSoup通过查找Id获取元素信息

    2022-12-22 22:08:59
  • Python爬虫包BeautifulSoup简介与安装(一)

    2021-07-25 05:06:10
  • IE8 CSS之生成内容

    2008-09-09 22:14:00
  • 通过视图修改数据时所应掌握的基本准则

    2009-01-07 14:22:00
  • js和jquery判断数据类型的4种方法总结

    2023-08-25 08:49:18
  • Python实现如何根据文件后缀进行分类

    2023-12-11 07:46:40
  • Python进程,多进程,获取进程id,给子进程传递参数操作示例

    2021-01-13 09:39:47
  • asp之家 网络编程 m.aspxhome.com