一、專案初始構建

現在如果要構建一個 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 ，以便於快速開始。

不同的模板有不同的用處： 簡易的可以更快速的開發，全功能適合有野心的（大型、擴充套件性很高的–個人認為）

基於官方專案模板構建自己特殊的應用？

作為自由開發者，你如果不喜歡上面的模板，你可以 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 資料夾.該資料夾中就是我們可以用來發布的程式碼，直接將程式碼上傳到你的伺服器上就可以了。

五、參考文章

這篇文章的撰寫主要是參考了這兩篇文章：