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

基于越来越多的人选择vue,个人认为vue能入住主流还是非常重要的。在学习过程中，感觉它的环境搭建还是挺麻烦的，看到一个博主，觉得写得很不错，自己实验也成功，随采集用以记录

http://www.javashuo.com/article/p-bxfiofsb-ht.html

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的安装

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

（3）vue-cli的安装

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

至此，我们的运行环境已经搭建完成，可以部署项目后者运行已经存在的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，并安装所有需要依赖的包。

刚开始用的时候每次把控制台关了发现localhost:8080没办法运行报错，然后发现每次输入命令：cnmp run dev重新启动就可以了