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

1、项目初始构建

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

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

$ npm install -g vue-cli

• 1

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

$ vue init <template-name> <project-name> # 例如： $ vue init webpack my-project

• 1
• 2
• 3
• 4

这行代码其实就是从 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

• 1

安装依赖

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

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

• 1
• 2
• 3

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

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

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

• 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>

• 1
• 2
• 3
• 4
• 5
• 6

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

$ npm install --save vue-router

• 1

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 })

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

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

3、组件与其余插件

ok，到这步就能够开始写页面组件了，到 src 文件夹下的 components 文件夹下面，去定义本身的组件吧~

其余插件

若是想使用数据可视化库—— echarts ，能够输入如下命令来安装：

$ npm install --save echarts

• 1

若是想实现状态管理的功能，好比：登陆功能。就须要安装 vuex ，能够输入如下命令来安装：

$ npm install --save vuex

• 1

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

$ npm install --save babel-polyfill

• 1

4、项目预览与发布

在命令行中输入

$ npm run dev

• 1

就能够预览你也写的页面了。事实上，咱们通常都是先输入以上命令开启实时预览，而后再开始开发的，即它能够监听咱们开发中的改动。

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

$ npm run build

• 1

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

5、参考文章

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

• 基于vue、vuex、vue-router、echarts搭建的数据展现平台；
• Vuejs本身的构建工具。