總得有個開始
前序：
- 第一章：vue開發 —— CLI（開發環境）搭建
- 需要一個過目即忘的本領
- 正文一般都是囉嗦的，所以請看精簡版（有道是，欲知後事如何,且看下回分解）
一：步驟：
1.打開所在項目文件夾，選擇項目並右鍵選擇 Open with Code，項目結構如下圖所示：
項目結構圖.png
2.點擊vscore的菜單【終端】選擇【新建終端】在下面的終端面板裏面輸入下面命令（或者打開cmd，使用cd 跳轉到項目根目錄，使用下面命令也可）
npm run serve
執行圖（點擊圖中的連接或者複製到瀏覽器打開，默認使用本機的默認瀏覽器打開）：
執行結束圖.png
運行圖.png
3.至此，本章的內容結束了，直接運行就是一個demo，但是，這種方式實際上無趣，所以得先去整理下，然後模仿項目生成的結構來實現自己編寫的第一個demo
4.0 把 components、views文件夾下的vue文件刪除，把router.ts和store.ts刪除；
4.1 把 App.vue文件改成下面的代碼：
<template>
<div id="app"></div>
</template>
4.1 把main.ts改成下面的代碼：
import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
4.2 該demo僅僅用到了一個App.vue，實現在一個空白頁面顯示自定義數據，就是要怎麼間怎麼來
4.3 爲App.vue綁定一個腳本，創建一個name的屬性，在app 容器裏面新增html元素span標籤，爲App.vue綁定一個Less樣式，將app容器的字體居中顯示，將span的字體顏色改成藍色，且字體的大小改爲30px，代碼如下：
<template>
<div id="app">
<span> {{ name }}</span>
</div>
</template>
<style lang="less">
#app{
text-align: center;
}
span{
color: blue;
font-size: 30px;
}
</style>
<script lang="ts">
import { Vue } from "vue-property-decorator";
export default class App extends Vue {
name="瀟風劍易水";
}
</script>
效果圖：
demo運行圖.png