創建Vue項目詳解

一、安裝Vue腳手架

Vue提供了一個方便的腳手架工具，可以幫助我們快速創建一個Vue項目。首先，我們需要在命令行工具中安裝Vue腳手架：

npm install -g vue-cli

安裝完成後，我們可以在命令行工具中通過以下命令來創建一個新的Vue項目：

vue init webpack my-project

其中“my-project”為項目名稱，可以根據我們自己的需要進行修改。運行上述命令後，腳手架會詢問我們一系列問題，以便生成合適的項目結構：

1. Project name：項目名稱

2. Project description：項目描述

3. Author：作者名字

4. Vue build：選擇需要的 Vue 構建版本

5. Install vue-router：是否安裝 vue-router

6. Use ESLint to lint your code：是否使用ESLint來檢查代碼結構

7. Set up uni test：是否安裝並集成 unit test 測試工具

8. Set up e2e tests with Nightwatch：是否安裝並集成 e2e 測試工具

9. Should we run `npm install` for you after the project has been created?：是否在項目創建完成後自動運行npm install安裝依賴

二、目錄結構

在使用Vue腳手架創建項目後，我們可以看到生成的目錄結構如下：

my-project
|- build/
|  |- build.js
|  |- check-versions.js
|  |- utils.js
|  |- vue-loader.conf.js
|  |- webpack.base.conf.js
|  |- webpack.dev.conf.js
|  |- webpack.prod.conf.js
|  |- webpack.test.conf.js
|- config/
|  |- dev.env.js
|  |- index.js
|  |- prod.env.js
|  |- test.env.js
|- node_modules/
|- src/
|  |- assets/
|  |- components/
|  |- router/
|  |- App.vue
|  |- main.js
|- static/
|- test/
|- .babelrc
|- .editorconfig
|- .eslintignore
|- .eslintrc.js
|- .gitignore
|- .postcssrc.js
|- index.html
|- package.json
|- README.md

根目錄下的“build”文件夾包含了Webpack打包配置，而“config”文件夾包含了項目的配置信息。我們通常不需要修改“build”和“config”文件夾中的內容。src文件夾中包含了整個項目的開發文件，其中assets文件夾存放靜態資源，components文件夾存放組件，router文件夾存放路由配置，App.vue是整個應用的入口組件，而main.js則是項目的入口文件。

三、啟動項目

在創建了Vue項目後，我們可以通過以下命令來啟動項目：

npm run dev

運行上述命令後，我們可以在瀏覽器中訪問http://localhost:8080來查看應用。此時，我們還看不到太多內容，因為我們還沒有創建任何組件或路由。

四、創建組件

在Vue中，組件是應用中最基本的單元，我們需要先創建一些組件來構建應用。在src/components文件夾中，我們可以創建一個名為“HelloWorld”的組件：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

<style scoped>
.hello {
  font-size: 2em;
  text-align: center;
  color: #42b983;
}
</style>

在上述代碼中，我們定義了一個名為“HelloWorld”的Vue組件。組件的模板內容包含了一個div元素和一個h1標籤，使用了雙大括號語法來綁定msg數據。在腳本部分，我們定義了組件的數據對象，並將其導出為一個可以被導入的模塊。在樣式部分，我們給組件定義了一些基本樣式，其中scoped屬性表示樣式僅對當前組件有效。

五、創建路由

在Vue中，路由是管理頁面導航的機制。我們通常使用vue-router來配置並管理路由。在src/router文件夾中，我們可以創建一個名為“index.js”的文件來配置路由：

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

Vue.use(Router)

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

在上述代碼中，我們首先從“vue-router”包中導入Vue和Router模塊，並將Vue對象安裝到Router中。接下來，我們通過Router對象的routes屬性來定義我們的路由規則，其中每個路由規則均由path、name和component三個參數組成。其中path表示路由地址，name表示路由的名稱，component表示路由實際導航到的組件。

六、應用組件和路由

最後，我們需要將組件和路由應用到我們的應用中。在src/App.vue文件中，我們可以使用router-view元素來渲染當前路由的組件：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在以上代碼中，我們定義了App組件的模板內容，其中僅包含了一個id為“app”的div元素和一個router-view元素。最後，我們需要在src/main.js文件中將組件和路由應用到根Vue實例中：

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

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

在上述代碼中，我們首先導入Vue、App和router三個模塊，然後創建了一個新的Vue實例，並將其掛載到id為“app”的元素上。同時，我們使用router參數將路由對象注入到Vue實例中，使用components參數將App組件注入到Vue實例中，並使用template參數指定了App組件的模板內容。

總結

到這裡，我們已經基本完成了一個Vue應用的創建，包括了安裝Vue腳手架、目錄結構、啟動項目、創建組件和路由以及應用組件和路由。使用Vue腳手架可以大大簡化項目的開發和管理，同時Vue提供了很多有用的工具和功能，可以讓我們更加方便地構建複雜的Web應用。