Vue CLI3+Typescript初始化项目

环境要求

1. 检查是否安装node.js运行环境

//终端输入
node -v

2. 检查是否安装npm和cnpm包管理程序

//终端输入
npm -v
cnpm -v  // 淘宝镜像专用通道

3. 检查是否安装webpack构建工具

//终端输入
webpack -v

4. 检查是否安装Vue CLI3手脚架

// Vue CLI 提供了内建的 TypeScript 工具支持
npm i @vue/cli -g
//终端输入，这里是大写的"V"
vue -V

注意手脚架版本必须是vue-cli3
确定以上环境都没问题后，那么我们就往前走，构建项目开始。
第一步：按下快捷键：windows+x，输入cmd，按确定
注：为了创建项目顺利使用上/下键，特意选择cmd终端

// 终端输入，进入存放项目的目录，我的目录在D:\storecode\typescript
D:
cd storecode
cd typescript 

创建项目

第二步：创建项目

// 终端输入
vue create vue-ts

注意：vue-ts项目名称不包含大写字母

接下来我们选择按上/下键切换选择 Manually select features，可以让我们手动选择功能

同样按上/下键切换选择，按空格键选中
注意：这里是多选，空括号的就是没选上的

• Babel：将ES6编译成ES5
• TypeScript：JS超集，主要是类型检查
• Router和Vuex，路由和状态管理
• Linter/ Formatter：代码检查工具
• CSS Pre-processors：css预编译 (稍后会对这里进行配置)
• Unit Testing：单元测试，开发过程中前端对代码进行自运行测试
  
  是否使用Class风格装饰器？
  即原本是：home = new Vue()创建vue实例
  使用装饰器后：class home extends Vue{}
  
  我们选择Y就行
  
  继续选择Y(开发过程中发现不需要，再重新设置)
  
  选择ESLint + Prettier时，ESLint与Prettier相冲突的配置项会被关闭，仍需要配置一遍
  新手不建议选，新手选择第一个就行了
• tslint: typescript格式验证工具
• eslint w…: 只进行报错提醒；
• eslint + A…: 不严谨模式；
• eslint + S…: 正常模式；
• eslint + P…: 严格模式；
  
  
  单元测试可以点击单元测试官方文档进行了解的，可以点击进去学习。

• In dedicated config files 生成各自的独立文件（直译：在专用配置文件中）
• In package.json 将所有的依赖目录放在package.json文件里
  
  选N（以前不清楚，就选了y）
  如果安装的下载工具多：npm yarn，一般会提示选择用哪一个下载，yarn速度快。
  
  等待安装完成后，我们的项目创建就完成了。

启动

// 终端输入
cd vue-ts  // 进入项目根目录
npm run serve  // 启动

注意：根目录下找到package.json可以看到如下启动命令

• serve 开发启动
• build 生产打包环境
• test:unit 单元测试
• lint 检查代码是否符合 ESlint 的代码风格规范
  
  ctrl+鼠标点击启动成功日志里的访问地址
  

加入element-ui

// 终端输入
npm i element-ui -S

// main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

// Home.vue
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <!-- 安装好element-ui，这个按钮就是第一个调用实例 -->
    <el-button type="primary">element-ui按钮</el-button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    HelloWorld
  }
};
</script>

配置 .prettierrc

代码检查工具选择ESLint+Prettier时，ESLint与Prettier相冲突的配置会关闭，采用的是Prettier的配置项。
由于个人习惯于用单引号字符串和句尾五分号，但是Prettier会将字符串格式化为双引号，并在句尾自动添加分号，因此需要单独配置。
在package.json同级目录创建.prettierrc.js文件，并加上以下配置就可以了：

在package.json同级目录创建.eslintrc.js文件

报错小插曲：重启项目发现报错：

error and 0 warnings potentially fixable with the --fix option.
报这个错是因为package.json中配置项少了 --fixed

配置完成，重启。

demo实例

让我们用一个demo来认识装饰器props,data,compute,methods,created,watch分别对应typescript装饰器里的写法。

<template>
<div class="hello">
    <h1>{{msg}}--{{names}}</h1>
    <el-input type="text" v-model="txt"></el-input>
    <p>{{getTxt}}</p>
    <el-button @click="add">add</el-button>
    <p>{{sum}}</p>
</div>
</template>

<script lang="ts">
import {Component, Prop, Vue, Watch} from 'vue-property-decorator';

@Component
export default class MyDemo extends Vue {
    //props
    @Prop() private msg!:string
    @Prop() private names!:string

    // data
    private txt: string = '1'
    private sum: number = 0

    // computed
    get getTxt() {
        return this.txt
    }

    // methods
    private add() {
        this.sum++
        console.log(`sum: ${this.sum}`);
    }
    // 生命周期
    created(){
        console.log('created');
    }
    // watch
    @Watch('txt')
    changeTxt(newTxt: string, oldTxt: string) {
        console.log(`change txt: ${oldTxt} to ${newTxt}`)
    }
}
</script>