vue环境的搭建

       最近，老大给了我一个前后端分离的项目，叫我跑起来去看看里面的流程和代码，该项目前端是由vue写的，这就需要给本机搭建vue环境，搞了一上午才把项目跑起来，因为这个node和vue都是我以前没接触过的前端，在此把搭建过程记录下来。

       在搭建vue的开发环境之前，一定要先下载node.js，，vue的运行是要依赖于node的npm的管理工具来实现，而vue-cli是Vue 提供的一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

目录

1.node安装
2.vue-cli的脚手架安装(官方命令行工具)
3.用vue-cli创建vue项目

1、 node.js的安装

       node可以在百度node.js官网或者中文网里面下载，根据自己的电脑选择是32还是64 ，node.js都是傻瓜式安装，全部点next就好了。网址：https://nodejs.org/en/

Window+R 打开运行窗口，输入cmd命令，　
查看是否安装成功
（新版本node在安装时会自动配置环境变量，一些老版本的需要手动配置环境变量，可自行上网查询配置步骤）
　　A、node -v //查看 node 版本
　　B、npm -v //查看 npm 版本
　　C、node //查看node相关信息
　　

2、 vue-cli的脚手架安装(官方命令行工具)

     由于npm的服务器是在国外的，使用起来比较慢，该处与Maven的使用一样，都是改成阿里的镜像，我们这里使用淘宝的cnpm镜像来安装vue，以此加快下载依赖包的速度。

淘宝的cnpm命令管理工具可以代替默认的npm管理工具，

输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

可输入cnpm-v来检查是否安装成功
安装全局vue-cli脚手架
淘宝镜像安装成功之后，我们就可以全局vue-cli脚手架，
输入命令：cnpm install --global vue-cli

验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；
输入命令vue检查是否安装成功

3、用vue-cli创建vue项目

现在命令符进入你要创建项目的目录里，如在我的F:\Workspaces\WebStorm 2019.2目录创建vue项目，则直接输入cd F:\Workspaces\WebStorm 2019.2再改变盘符F:回车，

也可以直接在目标目录Shift+鼠标右键，点击【在此处打开命令窗口】

使用命令窗口创建项目命令：
vue init webpack 项目名
如创建一个名为vuedemo01的vue项目的命令：

vue init webpack vuedemo01

模版下载成功后会有一些交互的项需要填写：

 Project name vuedemo01 # 项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，
 如果有会报错Sorry, name can no longer contain capital letters），阮一峰老师博客为什么文件名要小写 ，可以参考一下。
 
 Project description A Vue.js project # 项目描述,随便写,也可直接回车
 
 Author # 作者名称,也可直接回车
 
 Vue build standalone # 我选择的运行加编译时,也可直接回车
	Runtime + Compiler: recommended for most users
	
 Install vue-router? Yes # 是否需要 vue-router，路由肯定要的,也可直接回车
 
 Use ESLint to lint your code? No # 是否使用 ESLint 作为代码规范，这是代码检查器，首次创建vue可以先不使用这个，
 不然你稍微少/多写一个空格就会报错，由于你不熟悉vue语法会很难找错误,输入n回车
 
 Pick an ESLint preset Standard # 一样的ESlint 相关，当你上一步输入n选择NO时，
 这一步不会出现
 
 Set up unit tests Yes # 是否安装单元测试,也可直接回车
 
 Pick a test runner 按需选择 # 测试模块,也可直接回车
 
 Setup e2e tests with Nightwatch? 安装选择 # e2e 测试,也可直接回车
 
 Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器，我选的NPM,也可直接回车

安装成功后，你去打开安装的目录就会有一个新创建的vuedemo01项目

项目结构：

若是安装不成功即项目vuedemo01目录没有node_modules文件夹，可以Ctrl+C结束安装，再cd进入项目vuedemo01目录，执行命令cnpm install进行初始化，安装我们的项目依赖包，也就是安装package.json里的包，安装完后可以看到项目里会新建了一个node_modules文件夹。

运行项目
命令行进入项目vuedemo01目录执行npm run dev

成功启动会提示浏览器访问的地址：

浏览器访问的地址：http://localhost:8080 就能看到欢迎页面，若页面加载不出来可能是本地8080端口被占用，需要修改一下配置文件config里的index.js的post即可

该处使用WebStorm打开新建的vuedemo01项目可以看见已经添加了许多文件

第二种创建项目命令

     vue官方提供第二种创建简介的vue项目的命令： vue init webpack-simple 项目名
，该种项目创建是没有语法检查的，所以使用该命令创建的项目就不会再提示你确认路由、语法检查等操作，使用该命令创建vuedemo02项目。

     首先命令符进入你要创建项目的目录里，如在我的F:\Workspaces\WebStorm 2019.2目录创建vue项目，则直接输入cd F:\Workspaces\WebStorm 2019.2再改变盘符F:回车，
输入创建的命令 ：vue init webpack-simple vuedemo02

是否使用sass？输入y回车，使用sass。
sass是专业级CSS扩展语言,我不是搞前端的，不是太懂这个。
与上面同理，创建中出错时可以Ctrl+C结束安装，再cd进入项目vuedemo02目录，执行命令cnpm install进行初始化

创建成功后，你去打开安装的目录就会有一个新创建的vuedemo02项目.

进入该vuedemo02项目就会发现项目的结构比之前的简单了许多

但会发现没有存放依赖的node_modules文件夹，因为这种创建文件夹方式没帮你自动创建依赖，需要自己手动创建，输入命令：cnpm install或者是国外服务器npm install


启动命令与上一步一样npm run dev

总结

1、搭建vue 的开发环境，安装vue 的脚手架工具官方命令行工具

npm install --global vue-cli / cnpm install --global vue-cli

2、创建项目必须cd 到对应的一个项目里面

vue init webpack vue-demo01
cd vue-demo01
cnpm install / npm install
npm run dev

3、另一种创建项目的方式（推荐） ***

vue init webpack-simple vuedemo02
cd vuedemo02
cnpm install / npm install
npm run