vue开发 —— 简单demo

总得有个开始

前序：

• 第一章：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

4.4 至此，该demo仅仅用到了html元素，ts和less，vue占位符，文章不宜过长，故本章到此，老板，结账。。。