vue系列教程(一) 搭建与部署

一 vue-cli构建项目

vue-cil构建项目：查看官网

vue-cli是vue脚手架工具,极其方便开发,可以 npm install --global vue-cli  全局安装

二 项目文件结构

如上图所示,就是我们项目的目录结构了.

通过表格给大家展示一下这些目录结构的作用：

build: 这个是我们最终发布的时候会把代码发布在这里，在开发阶段，我们基本不用管。

config: 配置目录，我们可以进行端口的配置，默认配置没有问题，所以我们也不用管.

static : 静态资源存放目录

src : 开发目录   至于node_modules和package.json就不多说了

三 SRC文件夹的情况

commponents目录（组件文件目录）：里面放了一个演示的组件文件，一般在开发中我比较喜欢把VUE组件放在这里面，你可以打开看下。当然，也可以直接删除。

App.vue是项目入口文件（最终的编译全靠它）。当然，我们需要改造，改造成我们可以使用的样子的。后面的博文会说。

main.js这是项目的核心文件。全局的配置都在这个文件里面配置，这里可以配置全局组件和指令等，很好奇吧？我后面会详细的讲这里怎么搞。

我们在src/page目录下面新建两个文件，分别是index.vue和content.vue，代码分别是：

   安装VueRouter2

在基本的VUE开发环境中，我们在构建项目时，需要安装VueRouter2到我们的项目。参考文档见VueRouter2安装文档

在我们的项目中打开终端，然后执行npm install vue-router -D命令。

我们查阅文档或者看官网的截图，会知道，命令是npm install vue-router，那为什么要加一个-D的参数呢？这个是为了让我们的安装的vue-router这个插件写入到package.json配置文件中。以便于下次再其他地方安装的时候，可以一并安装进去，否则，还得再安装一遍。

```

import vue from vue

extend default (

data{})

```