利用 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本身的構建工具。