Vue的环境搭建、项目建立及项目运行
学习vue.js的时候，都是别人帮助搭建的项目环境。今天想本身尝试着搭建运行环境运行正在进行中的项目，同时也整理一下本身查阅的搭建过程。vue
1.搭建Vue环境
安装Vue可使用<script>标签引用，也可使用CDN方法，感兴趣的童鞋能够去查阅。这里着重整理npm的安装方法，由于npm能很好的和Webpack等模块配合使用，在用Vue.js构建大型应用时推荐使用npm安装方法。node
Vue运行环境的搭建须要具有的东西：webpack
- node.js环境：npm包管理器
- cnpm：npm的淘宝镜像
- vue-cli：脚手架构建工具
（1）node.js的安装git
在node.js官网上下载而且安装node，安装过程很简单，一路点击next就OK了，必要的话更改安装路径。安装完成后，能够在电脑上打开命令行工具（win+R），输入node -v命令，查看node的版本，若是出现相应的版本号，则说明安装成功了。 web
note：npm包管理器是集成在node中的，安装了node也就有了npm，输入npm -v命令，会显示npm的版本信息。vue-cli
（2）cnpm的安装npm
在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org ,等待其安装完毕。没有报错则代表安装成功，（下图个人已经安装过了，显示更新成功的信息）。json
（3）vue-cli的安装浏览器
在命令行输入npm install -g vue-cli，等待安装完成。sass
至此，咱们的运行环境已经搭建完成，能够部署项目后者运行已经存在的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工具来管理项目，就没必要再用控制台了。