使用vue-cli搭建VUE项目
使用vue-cli搭建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就可以看到项目的主页了。
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了！
疑问1
按照官方教程可以很简单的搭建运行项目，但是VUE的运行原理是什么呢？资源文件如何加载的，如何编译的，主要加载了哪些文件，这些文件的对应关系又是什么？
作为一个后端小哥，对VUE真的不熟悉，在网上发现一个提问正好解决了我的疑问，https://segmentfault.com/q/1010000010792560，简单的说就是得先学习webpack（打包工具）才能解决这些疑问奥。
