利用 vue-cli 构建一个 Vue 项目

一、项目初始构建

现在如果要构建一个 Vue 的项目，最方便的方式，莫过于使用官方的 vue-cli 。

首先，咱们先来全局安装 vue-cli ，打开命令行工具，输入以下命令：

$ npm install -g vue-cli

然后，利用 vue-cli 构建一个 Vue 项目：

$ vue init <template-name> <project-name>

# 例如：
$ vue init webpack my-project

这行代码其实就是从 Github 的 Vue 官方项目模板库—— vuejs-templates 组织拉取代码，并设置该项目的名称。该命令是帮助大家通过选择应用比较广泛的几种官方项目模板库中的一种和可配置的几个步骤快速构建我们的应用。然而，这些模板并不限制你自己对于使用 Vue.js 的架构组织和选择类库。

注意：这里的第三个参数代表的是几种官方项目模板库中的一种，今天只粗略的介绍其中的四种：

• browserify——全功能的 Browserify + vueify ，包括热加载，静态检测，单元测试等；
• browserify-simple——一个简易的 Browserify + vueify ，以便于快速开始；
• webpack——全功能的 Webpack + vueify ，包括热加载，静态检测，单元测试等；
• webpack-simple——一个简易的 Webpack + vueify ，以便于快速开始。

不同的模板有不同的用处： 简易的可以更快速的开发，全功能适合有野心的（大型、扩展性很高的–个人认为）应用。他们的共同点就是，都支持 .vue 文件类型的组件方式。意味着任何只要符合 .vue 形式的第三方的组件都可以被使用，只需要发布在 npm 上。

基于官方项目模板构建自己特殊的应用？

作为自由开发者，你如果不喜欢上面的模板，你可以 fork 这些模板，修改它们以符合你自己特殊要求（甚至还可以创建一个你自己的模板），通过 vue-cli 命令使用。

$ vue init username/repo my-project

安装依赖

进入刚创建的工程文件夹，安装依赖：

# 安装依赖
$ cd <project-name>
$ npm install

到这里，一个 Vue 工程就初步构建完成了。

二、项目文件夹及文件简介

先简单介绍几个第一层的文件夹：

• build 中是官方项目模板的基本配置文件，在例子中是 webpack ：开发环境配置文件，生产环节配置文件等；
• node_modules 是各种依赖模块；
• src 中是 vue 组件及入口文件；
• static 中放置静态资源文件；
• index.html 是页面入口文件。

App.vue 文件

先来看看 src 下的 App.vue 文件中的这个代码段：

<template>
    <div id="#app">
        <img src="./assets/logo.png">
        <router-view></router-view>
    </div>
</template>

这个代码段中的 <router-view> 组件是 vue-router 中渲染路径匹配到的视图组件。牵扯到路径，也就是路由，又由于是 Vue 单页面工程，所以自然少不了 vue-router 。那咱们自然要用以下命令来先安装 vue-router ：

$ npm install --save vue-router

main.js 文件

安装好 vue-router 后，那到哪里配置具体的路由呢？答案是 src 文件夹下面的 main.js 文件中，可以这么配置路由：

import Vue from 'vue';
import App from './App';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

// 定义路由组件
const Worldcloud = require('./components/cloud.vue');
const Building = require('./components/building.vue');

// 定义路由，配置路由映射
const routes = [
  { path: '/', redirect: '/wordcloud' },
  { path: '/wordcloud', component: Worldcloud },
  { path: '/building', component: Building }
];

// 创建router实例
const router = new VueRouter({
    routes
});

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  router
})

从路由映射的配置中可以看出，访问网站的根路由会直接跳转到 /wordcloud 组件页面下。

三、组件与其他插件

ok，到这步就可以开始写页面组件了，到 src 文件夹下的 components 文件夹下面，去定义自己的组件吧~

其他插件

如果想使用数据可视化库—— echarts ，可以输入以下命令来安装：

$ npm install --save echarts

如果想实现状态管理的功能，比如：登录功能。就需要安装 vuex ，可以输入以下命令来安装：

$ npm install --save vuex

如果想使用 ES6 中新的 API ，而不仅仅是利用 Babel 转译新的 JavaScript 句法，那就需要安装 babel-polyfill 为当前环境提供一个垫片，否则会报错。有哪些属于 ES6 中新的 API 呢？比如：Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法。可以输入以下命令来安装 babel-polyfill ：

$ npm install --save babel-polyfill

四、项目预览与发布

在命令行中输入

$ npm run dev

就可以预览你也写的页面了。事实上，我们一般都是先输入以上命令开启实时预览，然后再开始开发的，即它可以监听我们开发中的改动。

项目可以在本地预览了，但是要怎么发布到网上呢？首先，在命令行中输入

$ npm run build

会生成一个 dist 文件夹.该文件夹中就是我们可以用来发布的代码，直接将代码上传到你的服务器上就可以了。

五、参考文章

这篇文章的撰写主要是参考了这两篇文章：

• 基于vue、vuex、vue-router、echarts搭建的数据展示平台；
• Vuejs自己的构建工具。