前言
本文主要介紹在VisualStudioCode下開發Vue。
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文件。
Debugger for Chrome：在Chrome瀏覽器或任何其他支持Chrome調試器協議的目標中調試JavaScript代碼。
Vetur：Vue代碼視圖工具，不安裝這個Vue代碼會全部飄紅。
PS：VSCode自帶格式化代碼功能，快捷鍵Alt+Shift+F。
Vue開發
首先創建一個Vue項目——vue init webpack KibaProject。
然后使用VSCode打開文件夾，打開項目。
基礎配置
打開.eslintrc.js文件，這個eslint是我們的語法檢查器，打開它，增加自定義規則，逗號，引號，分號檢測取消。
rules: {
'generator-star-spacing': 'off', // allow async-await
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',// allow debugger during development
'quotes': 'off',
'semi': 'off',
'comma-dangle': 'off',
'no-console': 'off',
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'space-before-function-paren': 'off',
}
脈絡基礎
然后找到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>
<div v-on:click="click">click</div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
msg: "HelloWorld_msg",
};
},
methods: {
click: function () {
this.msg = "kiba";
},
},
};
</script>
<style>
</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，啟動調試頁面，頁面如下：
路由切換已經實現。
終端
我們除了使用VSCode的調試，還可以使用終端調試，我們可以新建終端，如下圖：
然后下方會彈出小界面，我們可以在界面里輸入，npm run dev。
如果第一次運行報錯，我們可以修改命令編譯的配置文件build/webpack.base.conf.js。
注釋如下代碼，如圖：
然后在終端里Ctrl+c取消當前運行，然后再重新運行npm run dev。
終端是什么？
終端實際上就是一個CMD窗口，打開終端時，CMD窗口自動為我們CD到了我們項目的文件夾。
PS：運行npm audit fix可以修復一些npm的漏洞
ElementUI
npm i element-ui -S
然后在main.js里引入Element的包。
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'
然后在new Vue前使用ElementUI。
Vue.use(ElementUI)
然后就可以使用ElementUI開發了。
參考網站：https://element.eleme.cn/2.0/#/zh-CN/component/layout
PS：npm install命令可以下載和更新package.json中的包。
PS：VSCode調試參考：https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html
----------------------------------------------------------------------------------------------------
到此，使用VisualStudioCode開發Vue就已經介紹完了。
----------------------------------------------------------------------------------------------------
注：此文章為原創，任何形式的轉載都請聯系作者獲得授權並注明出處！
若您覺得這篇文章還不錯，請點擊下方的【推薦】，非常感謝！
https://www.cnblogs.com/kiba/p/15351265.html
