使用VisualStudioCode開發Vue

前言

本文主要介紹在VisualStudioCode下開發Vue。

Nodejs、Npm、Vue的專案搭建參考下面文章。

用後臺開發的邏輯理念學習VUE

在Windows下學習Nodejs、Npm和VUE

VSCode配置

首先為VSCode增加外掛，ctrl+shift+X調出擴充套件管理介面。

Chinese (Simplified) Language Pack for Visual Studio Code：適用於 VS Code 的中文（簡體）語言包，此中文（簡體）語言包為 VS Code 提供本地化介面。

Code Debugger：無需配置launch.json即可進行單檔案除錯，點選右上角蟲子圖示或者右鍵選單都可以。

禁用JS-CS-HTML Formatter：格式化js、CSS、HTML、JSON檔案。

PS：VSCode自帶格式化程式碼功能，快捷鍵Alt+Shift+F。

Vue開發

首先建立一個Vue專案——vue init webpack KibaProject。

然後使用VSCode開啟資料夾，開啟專案。

然後找到index.html檔案，這個是我們的起始頁面。

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>homestead_onemap</title>

  </head>

  <body>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

Vue是一個單頁面的專案，即他只有一個Html頁面，當切換顯示.vue字尾名的頁面時，是由vue.js控制，將主頁中id為app的div的內容替換為指定的.vue頁面的內容，.vue檔案是元件檔案，預設用<template>標籤開頭結尾，也是為了匯入時替換html方便而定義的。替換原理大家可以學習一下Mustache.js ，現在流行的前端框架基本上都是這個模式的，替換html，同時將html內雙花括號的內容，替換為實體屬性。

main.js：main.js檔案是專案啟動入口，預設建立時，替我們引入了App.vue元件（import App from './App'），並區域性註冊了該元件。

app.vue：系統預設使用的元件，div內容被<template>包含，js中定義了一個可以被外部訪問的預設的函式（export default），在這個函式中，可以定義當前元件名，元件的內部頁面實體（ViewModel）和內部函式，在Vue中，元件與元件之間是解耦的，即在其他元件中定義同名屬性和函式，也不影響當前頁面。也就是說，在使用該元件替換Index.html中id為app的div的內容時，元件可以正常使用元件頁面內定義的實體和事件函式。

新建Vue元件

系統建立時，會預設建立一個HelloWorld.vue元件，但裡面內容比較多，我們稍微修改一下讓它簡單點，程式碼如下：

<template>

  <div>

    <div>

      <h1>I am HelloWorld.</h1>

    </div>

    <h1>{{ msg }}</h1>

  </div>

</template>



<script>

export default {

  name: "HelloWorld",

  data() {

    return {

      msg: "HelloWorld_msg",

    };

  },

};

</script>

<style scoped>

</style>

如程式碼所示，簡單定義一個ViewModel，然後在html中輸出屬性msg。

然後我們再定義一個FirstComponent，程式碼如下：

<template>

  <div>

    <h1>I am FirstComponent.</h1>

  </div>

</template>

<script type="text/javascript">

export default {};

</script>

路由編寫—Router

元件編寫完，我們進入Router/index.js頁面，先引入我們剛建立的兩個元件，然後修改路由列表routes，如下圖：

路由展示—router-view

路由編寫完，我們進入到App.vue頁面，頁面建立時自帶了<router-view />，現在我們增加兩個router-link，用來導航<router-view />，修改程式碼如下：

<template>

  <div id="app">

    <p>{{ App_msg }}</p>

    <p><router-link to="/">firstcomponent</router-link></p>

    <p><router-link to="/HelloWorld">HelloWorld</router-link></p>

    <router-view />

  </div>

</template>

<script>

export default {

  name: "App",

  data() {

    return {

      msg: "App_msg",

    };

  },

  methods: {

    click: function () {},

  },

};

</script>

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