Vue.js开发环境的构建

一.导言

Vue.js是什么

Vue.js(发音为/vju/，类似于view)是一个用于构建用户界面的渐进式框架。与其他重量级框架不同，Vue采用自下而上的增量开发设计。Vue的核心库只关注视图层，很容易学习并与其他库或现有项目集成。另一方面，Vue完全能够驱动使用Vue生态系统支持的单文件组件和库开发的复杂单页应用程序。

Vue.js的目标是通过尽可能简单的API实现响应和组合视图组件的数据绑定。

Vue.js是MVVM模式的框架。如果读者有角度经验，他们将能够很快开始使用Vue

vue.js :的特点

易用性：你学过HTML、CSS和JavaScript吗？立即阅读指南，开始构建应用程序！

灵活性：简单紧凑的内核，先进的技术堆栈，足以满足任何规模的应用。

高效：运行大小16kb min gzip，超快虚拟DOM，最省心优化

二、环境建设

Vue推荐开发环境：

Node.js: javascript运行时，不同的系统直接运行各种编程语言

npm: Nodejs下的包管理器

web pack k :的主要目的是通过CommonJS的语法准备所有需要在浏览器端发布的静态资源，比如合并和打包资源。

用户生成的Vue项目模板

开始安装：

1.nodejs，因为我已经安装了，跳过它

2.webpack

npm安装web pack-g

3.安装vue脚手架

npm安装vue-CLI-g

测试：

在硬盘上找到项目的文件夹，在终端输入目录

光盘目录路径基于模板创建项目

vue init webpack-simple项目的名称不能使用中文，或者创建vue1.0的vue init webpack-simple#1.0项目的名称不能使用中文

项目目录如图：所示

安装项目依赖于：

安装vue路由模块vue路由器和网络请求模块vue资源

进入项目执行

npm安装vue-路由器vue-节省资源

启动一个项目

npm运行开发运行时报告错误

“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！节点v4.0.0-rc.5npm ERR！npm v2.14.2npm ERR！代码ELIFECYCLEnpm ERR！[email protected]start : ` NPM run clear NODE _ ENV=development web pack-dev-server-host 0 . 0 . 0 . 0-dev tool eval-progress-color-profile ` NPM ERR！退出状态1npm ERR！npm ERR！在[emailprotected]启动脚本“npm运行clear NODE _ ENV=development web pack-dev-server-host 0 . 0 . 0 . 0-dev tool eval-progress-color-profile”失败。npm ERR！这很可能是yy-ydh-web包的问题，npm ERR！不是用npm本身. npm ERR！告诉作者，这在您的system:npm ERR上失败了！npm运行clear NODE _ ENV=development web pack-dev-server-host 0 . 0 . 0 . 0-dev tool eval-progress-color-profilenpm ERR！你可以通过via:npm获取他们的信息！npm所有者ls yy-ydh-webnpm ERR！上面可能有额外的日志输出。npm ERR！请在任何支持请求中包含以下文件：npm ERR！D: \工作区\ node _ modules \ YY-ydh-web \ NPM-debug . log

Windows不支持NODE _ ENV=开发的设置模式

变通方法：

安装跨环境： NPM安装跨环境保存开发

NODE_ENV=低电平