Vue.js开发环境搭建

程序员文章站 2023-11-06 16:44:34

一、简介 vue.js 是什么 vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，vue...

一、简介

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

2.webpack

npm install webpack -g

Vue.js开发环境搭建

3.安装vue脚手架

npm install vue-cli -g

测试:

在硬盘上找一个文件夹放工程用的，在终端中进入该目录

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)

接着继续安装