使用VisualStudioCode開發Vue

kiba518發表於2021-09-29

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>

程式碼編寫好，我們執行F5，啟動除錯頁面，頁面如下：