vue + typescript

环境搭建

node的下载和安装不用多说，自行百度研究。

1.使用npm全局安装ts     npm i -g typescipt

安装成功后输入tsc 检查，如果出现如下一大堆代码，说明安装成功

 windows安装过程中可能会出现以下情况：

解决办法参考： [tsc不是内部或外部命令的解决办法](https://www.cnblogs.com/sanyekui/p/13157918.html)

2.新建一个ts文件，在cmd中执行tsc 01_hello.ts

 

 会发现，多出了一个01_hello.js的文件，说明环境搭建成功。

遇到的bug

1.Typscript 文件编译后，vscode提示重复声明的问题

 解决办法：

在项目根目录添加配置文件 tsconfig.json即可，空文件也可以

使用webpack打包ts代码

1.npm init生成package.json文件

2.安装依赖 cnpm i -D webpack webpack-cli typescript ts-loader

3.配置tsconfig.json

{
    // 编译器的选项
    "compilerOptions": {
        "target": "ES2015", // target用来指定ts被编译为的es版本
        "module": "ES2015", // 指定要使用的模块化的规范
        "strict": true // 所有严格检查的总开关
    }
}

4.配置webpack.config.js

// 引入一个包
const path = require('path')

// webpack中的所有配置信息都应该写在module.exports中
module.exports = {
    // 指定入口文件
    entry: './index.ts',
    // 指定打包文件所在目录
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js' // 打包后文件的文件
    },
    // 指定webpack打包时要使用模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // test指定的是规则生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use: 'ts-loader',
                // 要排除的文件
                exclude: /node-modules/
            }
        ]
    }
}

5.打包npm run build 生成dist/bundle.js文件

项目目录如下：

6.自动生成html文件

cnpm i -D html-webpack-plugin 

7.在webpack.config.js里配置html-webpack-plugin插件

8.安装webpack内置服务器，cnpm i -D webpack-dev-server（根据项目的改变自动刷新）

9.清除dist目录，cnpm i -D clean-webpack-plugin

10.安装babel,将es6高级语法转换为旧的语法支持各种浏览器

cnpm i -D @babel/core @babel/preset-env babel-loader core-js

即时更新ts代码指令

tsc -w

贪吃蛇demo

启动项目： npm start

vue3模块

创建vue3.0工程

查看@vue/cli版本,确保@vue/cli版本在4.5.0以上

vue  -V 查看

安装或者升级你的@vue-cli
npm install -g @vue/cli

安装的过程可能会出现“mac Missing write access to /usr/local/lib/node_module”的报错，解决办法为： sudu npm install -g @vue/cli

创建

vue create vue_test

启动

cd vue_test

npm run serve 

过程截图如下：