# 搭建VUE项目

## 1. 安装并初始化项目

Vue.js提供了一个官方命令行工具，可用于快速搭建大型的应用。

```
# 全局安装 vue-cli（前提是安装了淘宝的npm镜像，就可以使用cnpm命令了）
cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
...
# Project initialization finished!
# ========================

To get started:

  cd my-project
  npm run dev

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

## 2. 运行并访问项目

```
# 进入项目
cd my-project
# 安装相关依赖包
cnpm install
# 启动运行
cnpm run dev
# 运行成功之后显示：
 DONE  Compiled successfully in 3323ms                                                                          14:17:24

 I  Your application is running here: http://localhost:8080
```

项目启动成功，通过浏览器访问[http://localhost:8080就可以看到项目的主页了。](http://localhost/:8080%E5%B0%B1%E5%8F%AF%E4%BB%A5%E7%9C%8B%E5%88%B0%E9%A1%B9%E7%9B%AE%E7%9A%84%E4%B8%BB%E9%A1%B5%E4%BA%86%E3%80%82)

## 3. 项目目录结构

刚初始化完成的项目目录以及作用：

| 目录/文件         | 说明                                                                                                                                                                              |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| build         | 项目构建(webpack)相关代码                                                                                                                                                               |
| config        | 配置目录，包括端口号等。我们初学可以使用默认的。                                                                                                                                                        |
| node\_modules | npm 加载的项目依赖模块                                                                                                                                                                   |
| src           | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：**assets:** 放置一些图片，如logo等。**components:** 目录里面放了一个组件文件，可以不用。**App.vue:** 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。**main.js:** 项目的核心文件。 |
| static        | 静态资源目录，如图片、字体等。                                                                                                                                                                 |
| test          | 初始测试目录，可删除                                                                                                                                                                      |
| .xxxx文件       | 这些是一些配置文件，包括语法配置，git配置等。                                                                                                                                                        |
| index.html    | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。                                                                                                                                                  |
| package.json  | 项目配置文件。                                                                                                                                                                         |
| README.md     | 项目的说明文档。                                                                                                                                                                        |

## 4. 项目构建后打包到服务器

更改config/index.js文件，将两处`assetsPublicPath`的值从`/`改为`./`，然后运行：

```
cnpm run build
```

运行成功后目标文件会生成到`dist`目录，然后放到目标服务器，以tomcat服务器为例，将dist整个目录放到webapps下面，启动tomcat然后访问[http://localhost:8080/dist就OK了！](http://localhost:8080/dist%E5%B0%B1OK%E4%BA%86%EF%BC%81)

### 疑问1

按照官方教程可以很简单的搭建运行项目，但是VUE的运行原理是什么呢？资源文件如何加载的，如何编译的，主要加载了哪些文件，这些文件的对应关系又是什么？

作为一个后端小哥，对VUE真的不熟悉，在网上发现一个提问正好解决了我的疑问，[https://segmentfault.com/q/1010000010792560，简单的说就是得先学习webpack（打包工具）才能解决这些疑问奥。](https://segmentfault.com/q/1010000010792560%EF%BC%8C%E7%AE%80%E5%8D%95%E7%9A%84%E8%AF%B4%E5%B0%B1%E6%98%AF%E5%BE%97%E5%85%88%E5%AD%A6%E4%B9%A0webpack%EF%BC%88%E6%89%93%E5%8C%85%E5%B7%A5%E5%85%B7%EF%BC%89%E6%89%8D%E8%83%BD%E8%A7%A3%E5%86%B3%E8%BF%99%E4%BA%9B%E7%96%91%E9%97%AE%E5%A5%A5%E3%80%82)

### webpack简介

看了一些资料，简单介绍一下webpack，webpack是一个js应用程序的静态模块打包器，它实现的就是将程序的多个模块打包成1个或多个bundle。

webpack几个关键的概念如下：

1. **入口：**就是项目的一点，你可以理解为java或C的main函数；
2. **输出：**就是项目打包的路径，以及文件的命名；
3. **loader：**loader让webpack处理非js文件，因为webpack只能处理js，所以loader的作用就是将所有类型的文件转换为webpack能够处理的有效模块；
4. **插件：**就是扩展咯，给你无限想象。

> 详细的可以看看：<https://www.webpackjs.com/concepts/>