Vue.js 相關知識（腳手架）

1. vue-cli 簡介

Vue-cli 是 vue的設計者，為提升開發效率而提供的一個腳手架工具，可通過vue-cli快速構造項目結構

2. vue-cli 安裝步驟

• 安裝npm 或 cnpm

npm config set registry https://registry.npm.taobao.org

npm install cnpm -g

• 安裝webpack、webpack-cli
  • 建議全局安裝一次：

cnpm install webpack webpack-cli –g

• • 本地安裝一次：

cnpm install webpack webpack-cli --save-dev

• 安裝vue-cli
  • 全局安裝vue-cli後，可直接使用vue命令

cnpm install vue-cli -g

• 創建基於webpack的項目結構
  • vue init webpack 項目名稱

• 運行項目
  • npm run dev

3. vue-cli項目目錄結構

• build：構建項目的配置目錄
• config：配置目錄，預設配置沒有問題（不用管）
• node_modules：項目開發依賴的一些模塊
• src：開發目錄，基本上工作在此開展
• static：靜態資源目錄，圖片、字體等資源
• .xxx：配置文件，語法配置，git配置。（不用管）

• main.js：項目的入口文件
• App.vue：根組件，就如代碼中的 new Vue()  div id=”app”
• components：自定義的組件目錄

• router/index.js：路由配置文件

• 單文件組件：將一個組件需要的所有內容（template、js、css）單獨寫到一個文件中，便於開發與維護。單文件組件尾碼常命名為：xxx.vue

 4. 例子

• 在預設的目錄結構的基礎上，創建一個Test組件

Test.vue 代碼

<template>
    <div>
        <h1>Test組件</h1>
    </div>
</template>
<script>
    export default{

    }
</script>
<style>
    h1{color:green}
</style>

• 在router/index.js 路由文件中導入模塊並添加路由

index.js 代碼（紅色部分）

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/Test'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
        path: '/test',
        name: 'Test',
        component: Test
    }
  ]
})

• 訪問http://localhost:8080/#/test

5. 項目打包

運行npm run build，將項目上線後運行時所需文件打包到一個文件中

執行完畢，在vuedemo目錄下會創建dist目錄，其中保存了打包之後的文件