vue环境搭建

      Vue是近两年来比较火的一个前端框架（渐进式框架吧），与reactjs和angularjs三国鼎立。

      Vue是什么，是一套构建用户界面的渐进式框架（官网解释），什么叫渐进式框架呢，简单回答就是主张最少，这些概念只能自己去看，自己去理解，一千个读者一千个哈姆雷特，不过多的解释。Vue官方文档 很全面的。

      Vue两大核心思想，组件化和数据驱动，组件化就是将一个整体合理拆分为一个一个小块（组件），组件可重复使用，数据驱动是前端的未来发展方向，释放了对DOM的操作，让DOM随着数据的变化自然而然的变化（尤神原话），不必过多的关注DOM，只需要将数据组织好即可。

      Vue-cli是快速构建这个单页应用的脚手架，这个可是官方的。官方给的建议，如果你是初次尝试Vue，哪就老老实实用普通的书写引入js文件，这里牵扯太多的东西，例如webpack 、npm 、nodejs 等等，很容易成就从入门到放弃的思想。这篇文章本身就是按照官方的文档中的构建流程来的（官方构建建议 ）。以下是构建过程。

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

安装node.js

从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。

安装完成之后，打开命令行工具，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。

 

 

npm包管理器，是集成在node中的，所以，直接输入 npm -v就会如下图所示，显示出npm的版本信息。

 

 

OK！node环境已经安装完成，npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像---cnpm。

安装cnpm

在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待，安装完成如下图。

 

 

完成之后，我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的，查看淘宝npm镜像官网。

 

安装vue-cli脚手架构建工具

在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。安装完成后命令行输入vue -V来进行查看 vue-cli的版本号

通过以上三部，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。

用vue-cli构建项目

要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录。在这里，我选择桌面来存放新建的项目，则我们需要先把目录cd到桌面，如下图。

 

 

在桌面目录下，在命令行中运行命令 vue init webpack firstVue 。解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中（我的实例中，会在桌面生成该文件夹），如下图。

输入命令后，会询问我们几个简单的选项，我们按需填写就好。

1. Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写。
2. Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
3. Author：作者，如果你有配置git的作者，他会读取。
4. Install vue-router? 是否安装vue的路由插件，Y代表安装，N无需安装，下面的命令也是一样的。
5. Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。
6. setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha。
7. Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试。
8. Should we run npm install for you after the project has been created? (recommended) npm 这一步会询问你使用npm安装还是yarn安装包依赖，我这里选择的是npm，听说yarn更快更好，童鞋们可以试试，我建议大家使用yarn安装，使用yarn之前确保你的电脑已经安装yarn。以前老版本的vue-cli是没有这个选项的，老版本的vue-cli只是下载vue项目模板，下载完成后需要进入项目文件夹进行包依赖安装，现在vue-cli会帮你安装包依赖，只能说vue真的是越来越人性化了，怪不得这么多人使用vue进行开发。下面截个图

 

运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。

 

 

打开firstVue文件夹，项目文件如下所示。

 

 

这就是整个项目的目录结构，其中，我们主要在src目录中做修改。这个项目现在还只是一个结构框架，整个项目需要的依赖资源都还没有安装，如下图。

 

 

安装项目所需的依赖

要安装依赖包，首先cd到项目文件夹（firstVue文件夹），然后运行命令 cnpm install ，等待安装。

 

 

安装完成之后，会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。

 

 

安装完依赖包之后，就可以运行整个项目了。

 

运行项目

1. 第一步命令行输入

cd my-project 

1. 第二步命令行输入

npm run dev 

npm run dev 会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

 

这里简单介绍下 npm run dev 命令，其中的“run”对应的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一个快捷方式。

 

项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。运行成功后，会看到如下所示的界面。

 

人会问为啥项目启动了没自动打开浏览器，莫慌，只要在项目根目录下找到package.json，然后打开该文件，在文件中的script脚本命令的dev行加入–open就可以了。如图所示。然后重新启动项目就可以自动打开浏览器了

打开别人的Vue项目

有时控制台里报错“‘webpack-dev-server’不是内部或外部命令，这是需要将项目里的“node_modules”文件夹删除，然后在cmd中cd到项目目录，依次运行命令：npm install和npm run build，最后运行npm run dev后项目成功运行

补充说明：
再回看一下刚才我们在初始化项目的时候的命令

vue init webpack my-project

命令说明 ：vue init

project-name 想必大家都知道是我们要初始化的项目名称，而template-name 是表示模板名称，vue-cli官方为我们提供了5种模板，其中webpack是最常用的模板，一般我们开发项目都会用webpack进行开发，而vue官方也推荐我们使用webpack，建议大家学学webpack，还是一个比较有用的前端构建工具。 
下面看看其他剩下的几种模板

webpack-simple：一个简单webpack+vue-loader的模板，不包含其他功能。

browserify：一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。

browserify-simple：一个简单Browserify+vueify的模板，不包含其他功能。

simple：一个最简单的单页应用模板。