Vue的环境搭建、项目创建及项目运行

学习vue.js的时候，都是别人帮助搭建的项目环境。今天想自己尝试着搭建运行环境运行正在进行中的项目，同时也整理一下自己查阅的搭建过程。

1.搭建Vue环境

安装Vue可以使用<script>标签引用，也可以使用CDN方法，感兴趣的童鞋可以去查阅。这里着重整理npm的安装方法，因为npm能很好的和Webpack等模块配合使用，在用Vue.js构建大型应用时推荐使用npm安装方法。

Vue运行环境的搭建需要具备的东西：

• node.js环境：npm包管理器
• cnpm：npm的淘宝镜像
• vue-cli：脚手架构建工具

（1）node.js的安装

在node.js官网上下载并且安装node，安装过程很简单，一路点击next就OK了，必要的话更改安装路径。安装完成后，可以在电脑上打开命令行工具（win+R），输入node -v命令，查看node的版本，如果出现相应的版本号，则说明安装成功了。 

note：npm包管理器是集成在node中的，安装了node也就有了npm，输入npm -v命令，会显示npm的版本信息。

（2）cnpm的安装

cnpm是npm的淘宝镜像，可以提升下载速度，安装cnpm后，可以在后续的命令中用cnpm代替npm。

在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org ,等待其安装完毕。没有报错则表明安装成功，（下图我的已经安装过了，显示更新成功的信息）。

（3）vue-cli的安装

在命令行输入npm install -g vue-cli，等待安装完成。

安装完毕后在命令行输入vue --version，会显示安装的版本号，安装成功。

至此，我们的运行环境已经搭建完成，可以部署项目后者运行已经存在的vue项目。

2.快速创建一个基于webpack的项目框架

webpack是一款模块加载及处理工具，可以把各种资源，如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。也就是说，webpack可以把ES6语法的js文件，sass样式等无法直接在浏览器中处理的语言编译成浏览器支持的形式，也可以将需要的文件进行合并、压缩混淆。

---

如果想放到指定的目录下，先进入这个目录在执行创建项目的命令。例如：  

• d:回车   //进入D盘                      
• cd work回车   //进入D盘的test文件夹
• D:\work\vue init webpack my-vue     //创建一个基于"webpack"的项目，后面是项目名（my-vue） 
• 依次按照提示输入，项目名、项目描述、项目作者等等，然后一路回车  看到 这句Project initialization finished!项目就创建好了。
• To get started:  就是告诉你接下来该做什么，依次完成下面3行命令就可以了。进入my-vue项目-----安装npm依赖-----运行项目

3.运行一个已经存在的项目

（1）导入项目：可以是本地已经存在的项目或者在GitHub上下载你需要的相关项目，存放在本地（我存放在d盘的work文件夹里）；

（2）在控制台上输入相关命令，进入到项目所在的文件夹，然后在控制台输入npm install命令添加包依赖（note：当然我们安装了cnpm，这里的npm都可以用cnpm代替） ；

注意：上述命令可能会出现Error: Cannot find module 'bug-versions/package.json'，使用npm install -d 可以自动配置package.json，并安装所有需要依赖的包。

（3）运行项目：在控制台输入npm run dev命令，会在浏览器上自动运行该项目。

当然我们也可以安装git工具来管理项目，就不必再用控制台了。