VUE入门实践

环境搭建

1. 安装 [Node.js](http:///)  **版本越新越好**

2. 执行 `npm install vue -g`

3. 执行 `npm install webpack -g`

环境构建

前端发展到如今这个时代，前端自动化已经深入人心，所以高端一点的开源项目都会有自己的脚手架，vue的项目构建脚手架叫[vue-cli](https://github.com/vuejs/vue-cli),名字真是通俗易懂~~

安装也是十分方便, 执行 `npm install vue-cli -g`,安装完成之后，你就可以傻瓜式的创建一整套前端构建流程了，各种热刷新，图片处理，es6处理，css预处理等，你能想到的洋气功能。

回到正文，你所需要做的就只是这样一句命令： `vue init webpack my-project`然后vue就会引导着你建立你的工程：

D:\project\test>vue init webpack my-project

This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project

? Project description A Vue.js project

? Author cdhewu

? Vue build standalone

? Install vue-router? Yes

? Use ESLint to lint your code? No

? Setup unit tests with Karma + Mocha? No

? Setup e2e tests with Nightwatch? No

vue-cli · Generated 'my-project'.
To get started:
cd my-project
npm install
npm run dev

Documentation can be found at https://vuejs-templates./webpack

坑：到这里，可能就有点疑惑了，我们要生成一套构建流程，应该有对应的规则。但是我们好像并没有指定什么构建规则，为什么vue就帮我们生成了这么许多的代码呢？答案就是我们上面执行的那句命名`vue init webpack my-project`. 我们来解释一下这个命令。

• vue => 指的是vue-cli这个命令

• my-project => 指的是我工程的名字

  
  

那么`init webpack`指的是什么呢？没错，它指的就是我们当前这个项目要用什么样的规则来生成，vue把这些规则叫做[模板](https://github.com/vuejs-templates), vue目前提供5个官方模板，webpack正是其中的一个模板。我们也可以自定义模板，这部分内容留待以后探究吧。

好了，到了这里我们按照上面vue的提示：

To get started:
        cd my-project
        npm install
        npm run dev

依次执行这三个命令

坑：这里要注意，如果你在执行npm run dev过程中出现了端口被占用的情况，那么你可以编辑config/index.js，找到这段代码：

dev: {
env: require('./dev.env'),cd my-project
port: 9015,npm run dev
autoOpenBrowser: true,
assetsSubDirectory: 'static',

修改port的值就行。

经过一段时间的下载依赖，和各种构建之后，vue会自动打开浏览器，我们就可以看到我们第一个vue项目了，就像这样

恩，就是这么智能，然后我们打开我们的工程看一看目录结构

• build：存放打包脚本

• config：存放配置文件

• node_modules：存放你执行 `npm install` 命令时下载的各种依赖

• src：源代码文件

• static：空文件夹，可以放一些自己的图片，字体文件之类的静态文件 其他文件大家可以自行去百度一下就知道他们的作用了，这里就不再展开了。

环境打包

上面说了那么多，都是关于这个项目构建的流程，没错我们现在这个app已经可以在我们本地跑起来了，但是现在就迎来了一个关键问题，我们这个app是会上线的，我们怎么上线呢？ 简单，只需要在项目目录下执行：`npm run build`, 经过这么一段打包之后：

你会发现我们项目目录下多了一个dist文件夹:

dist下的index.html就是我们的App的入口。你可以把dist这个文件放到任何服务器上，然后访问这个index.html文件，你都可以看到vue的欢迎界面。

注意：index.html文件是webpack自动帮我们生成的，为什么呢？因为我们当前的构建脚本会在每个静态资源的名字后面加上md5码，这样我们每次上线后都不用手动去清除缓存，由于文件名变了，所以index.html中引入的静态资源链接也需要相应的更改，而这些项目都已经帮我们自动化实现了。