Vue开发环境配置

 

Vue.js是一个构建数据驱动的web界面的渐进式框架，其通过尽可能简单的API实现响应的数据绑定和组合的视图组件。与传统的Angular.js和React框架相比，Vue.js不仅具有简单易学和上手快的特点，并且可以通过组件的特性实现单页面的局部刷新和页面组件的重复利用，因此使用Vue.js技术开发效率会更高，并且项目部署后用户浏览网页的速度会更快，项目的后期维护也会变得更加便利，基于此等原因，Vue.js在最近几年受到了很多公司的青睐，因此作为IT行业的一员，能够独立配置Vue的开发环境，成为我们每个IT专业人士深入学习Vue.js技术的第一步。

Vue.js开发环境的配置步骤

1. Vue.js开发环境配置
2. WebStorm集成Node.js

一、Vue.js开发环境配置

1.Node.js的安装

从官网下载与电脑系统对应的Node.js安装版本

双击下载文件，进行安装

安装过程中出现以下界面，由于后期安装依赖模块会占用很大空间，因此本人安装在了D盘目录下

安装完成之后，以管理员权限方式打开命令行窗口，输入node -v和npm -v查看Node.js是否安装成功，如出现相应版本号，则说明安装成功

C:\WINDOWS\system32>node -v
v10.15.0

C:\WINDOWS\system32>npm -v
6.4.1

2.设置Node.js prefix(全局)和cache(缓存)路径

在node.js的安装路径下，新建文件夹node_global（存放依赖模块）和node_cache（存放缓存）两个文件

命令行窗口输入以下命令设置缓存路径

npm config set cache D:\nodejs\node_cache

命令行窗口输入以下命令设置模块存放路径

npm config set prefix D:\nodejs\node_global

命令行窗口输入以下命令，基于Node.js安装cnpm（淘宝镜像）

npm install -g cnpm --registry=https://registry.npm.taobao.org

设置环境变量，实现命令行窗口的任何位置，都可以调用cnpm、vue等命令

安装全局变量vue的依赖模块

cnpm install vue -g

安装全局变量webpack的依赖模块

cnpm install webpack -g

安装全局变量vue-cli脚手架的依赖模块

cnpm install vue-cli -g

安装全局变量vue-router的依赖模块

cnpm install vue-router -g

3.新建项目测试

以管理员权限的方式打开命令行窗口，进入存放新项目的文件夹，键入以下命令创建myvuedemo项目

vue init webpack myvuedemo

、

一路选择默认，创建后的初始化项目目录结构如下图

在命令行窗口，进入项目所在目录，安装工程依赖模块

cnpm install

在命令行窗口，输入以下命令运行该项目，测试一下项目是否可以正常工作

cnpm run dev

在浏览器中输入http://localhost:8080，看是否出现以下界面，如出现则说明Vue.js开发环境配置成功

二、WebStorm配置Node.js

1.WebStrom安装请参考文档：WebStorm安装文档

2.WebStrom配置Node.js

打开WebStrom，选择File>Settings>Node.js and NPM，在Node interpreter处选择Node.js的安装目录

 

重启后，通过新建一个Vue.js看配置是否成功

点击下一步后，会让你确认项目名等等一系列东西，在这里一路next选择默认

项目创建完成后的结构如图所示

选在package.json右键，选择show npm scripts,出现以下界面，双击dev运行项目，在控制台出现以下以下提示说明项目启动成功

然后在浏览器中输入http://localhost:8080，出现以下界面，说明WebStrom配置Node.js成功

在这里只是Vue.js的简单入门，针对Vue.js里面一些模块语法，条件语句、循环语句、监听属性和样式绑定等等一些相关知识更详细的讲解，还请各位各位同仁参考相关的开发文档。