随着vue3的出现,相信大家也都在考虑学习我们的typescript了吧，我也是刚开始学习ts，在学习过程中多少有点不适用，但是也是要学的，用的多自然就习惯啦(●'◡'●)
项目创建
⭐⭐⭐ 我们首先使用指令创建项目，下面有两种创建方式，相对来说，第二种会更快，打包速度，打包占用内存等其他方面都会有所提升
-
脚手架方式创建
npm install -g @vue/cli --安装（更新）脚手架 vue create colaProject -- 创建项目 npm run dev -- 启动项目
安装时可能会因为网慢而安装失败：
以下指令为解决办法---（一下其中一个清一下缓存，一般第一个就可以）
npm cache verify
npm cache clean
npm cache clean --force
npm i -g npm
2.使用vite创建项目
npm install vite-app colaProject -- 安装vite
cd colaProject -- 切换项目路径
npm install -- 安装依赖
npm run dev -- 启动项目
安装及配置自动编译文件
npm install -g typeScript
安装完以后运行（验证）
tsc -v
此时就可以在项目中运行ts代码啦。。。 开启监视可自动运行更改的文件
tsc -w
在运行过程中会发现每次运行都与要先将我们的ts代码编译为js代码才可以输出到页面，下面我们来讲解怎样自动编译文件 => => => => => => => =>
首先运行指令生成tsconfig.json文件
tsc --init
然后修改配置文件
出口文件（存放编译好的js代码的位置）
是否开启严格模式
接下来我们就可以运行ts代码啦☺☺☺☺☺
webpack打包
为了我们以后能更简便的使用并配合项目上线，下面我们来看下打包中所需要的配置以及安装的版本
现在webpack 安装过程中相信很多人会出现很多错误，版本号会造成运行中版本过大,版本不匹配等问题所以建议大家安装以下版本
npm install -D webpack@4.41.5
npm install -D webpack-cli@3.3.10
npm install -D webpack-dev-server@3.10.2
npm install -D html-webpack-plugin clean-webpack-plugin
npm install -D ts-loader
npm install -D cross-env
这是我目前用的版本⬆⬆⬆
我们安装好以后下面来看下各种配置我这里有配置好的模板，学过webpack的可以直接赋值使用
// 引入一个包
const path = require('path');
// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
// 判断是生产环境还是本地
const isProd = process.env.NODE_ENV === 'prduction'
function resolve(dir) {
return path.resolve(__dirname, '..', dir)
}
// webpack中的所有的配置信息都应该写在module.exports中
module.exports = {
mode: isProd ? 'prduction' : 'development',
// 指定入口文件
entry: {
app: "./src/main.ts"
},
// 指定打包文件所在目录
output: {
// 指定打包文件的目录
path: resolve('dist'),
// 打包后文件的文件
// filename: "[name].[contenthash:8].js",
filename: "bundle.js"
},
// 指定webpack打包时要使用模块
module: {
// 指定要加载的规则
rules: [
{
// test指定的是规则生效的文件
test: /.tsx?$/,
use: 'ts-loader',
include: [resolve('src')]
},
],
},
// 配置Webpack插件
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
template: "./public/index.html"
}),
],
// 用来设置引用模块
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
// 报错提示
devtool: isProd ? 'cheap-module-source-map' : 'cheap-module-eval-source-map',
// 端口配置
devServer: {
host: 'localhost',//主机名
stats: 'errors-only',//打包日志输出输出错误信息
port: 8081,
open: true
}
};
在使用过程中大家注意入口文件的名字要与上面的一致！！！
好啦，上面就是我们刚学ts所需要掌握的知识，希望这篇简短的文章会给大家带来帮助 (●'◡'●)
