使用Vue搭建环境及创建项目

使用Vue搭建环境及创建项目

1 开发环境

1.1 WebStorm

Webstorm是专用于web开发的号称最好的的编辑器，界面美观大方，有黑、白和经典三大主题可选，使用起来整体
感觉良好
下载地址：http://www.jetbrains.com/webstorm/  
下载完后在网上搜安装教程教程，这里就不做描述了

1.2 Node JS

Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/ 选择系统对应的版本，这里下载的是
Windows系统64位的zip文件，解压，可以看到里面有个node.exe可执行文件，如图所示

然后把Node添加到系统的环境变量中，如图所示：

安装npm命令：

// linux 系统命令
sudo npm install npm -g

// windows 系统命令
npm install npm -g

打开cmd命令行，输入npm -v出现下图所示信息则安装成功！！！！

1.3 安装 webpack

用npm命令安装打包工具webpack

npm install webpack -g

安装好以后输入命令webpack -v，出现下面信息则安装成功。

1.4 安装 vue-cli

安装vue脚手架项目初始化工具vue-cli：

npm install webpack -g

1.5 安装淘宝镜像

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

1.6 安装 Yarn

Yarn是Facebook发布的node.js包管理器，对比npm来说它更快、更可靠、更安全的依赖管理工具，安装代码：

npm i yarn -g -verbose

因为npm官方资源访问速度实在是太慢了，所以切换为淘宝镜像,安装完之后执行下面的命令：

yarn config set redistry https://registry.npm.taobao.org

2 创建项目

2.1 生成项目

当我们把环境搭建好了以后，就可以通过vue-cli来生成项目了哟， system-ui项目名。

nmp init webpack system-ui

更具一路的提示输入项目信息，等项目的生成

当你选择Yarm时：

2.2 启动项目

先要进入项目：

cd system-ui

执行应用启动命令，运行项目：

npm run dev

执行完命令后，出现： I Your application is running here: http://localhost:端口号 ，说明启动成功了。

在浏览器上浏览：http://localhost:8080,就会出现vue的界面。

以上就是生成Vue项目的过程了，如有不对的地方请多多包涵！！！！！！！！！！！！