vue开发 —— 简单demo
2019-09-30 本文已影响0人
潇潇剑_易水阁
总得有个开始
前序：
- 第一章：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
