无脚手架搭建vue3.0 + ts
一、先让Vue3能够运行
1.初始化
2.安装相关依赖
3.编写项目文件和配置webpack
4.运行项目
二、完善开发环境
1.安装html-webpack-plugin
2.安装webpack-dev-server
3.配置开发环境
4.启动项目
三、安装各种工具
1.使用less和less的解析器
2.使用Typescript
使用所有相关依赖如下
- 环境以及工具
nodeJS v.14.16.0 - 基于 Chrome V8 引擎的 JavaScript 运行环境
npm v6.14.11 - nodeJS的包管理工具
- 编译依赖
webpack v5.51.1 - 模块打包器
webpack-cli v4.8.0 - webpack的依赖
- 插件
html-webpack-plugin v5.3.2 - 简化Html的插件
- 项目依赖
vue v3.2.6
vue-loader v16.5.0 - vue3.0解析器
@vue/compiler-sfc v3.2.6 - vue-template-compiler的升级版
css-loader v6.2.0 - css解析器
style-loader v3.2.1 - css-loader的依赖
webpack-dev-server v4.1.0 - 基本的 web server
- 各种工具的依赖
less v4.1.1 - less css预处理语言
less-loadder v10.0.1 - less的解析器
typescript v4.4.2 - javascript的超集
ts-loader - ts的解析模块
vue-class-component - 可让您以类样式语法制作 Vue 组件的一个库
完善开发环境
1.安装html-webpack-plugin
htmlWebpackPlugin能让你省去在dist下创建index.html的麻烦,它能够自动根据main.js创建html文件,或者可以自定义模板。
npm install --save-dev html-webpack-plugin
2.安装webpack-dev-server
webpack-dev-server提供了一个基本的web server环境,并且内置了热更新功能,但是我们并不需要,因为vue-loader已经有热更新了。
npm install --save-dev webpack-dev-server
3.配置开发环境
1.新建一个html模板给html-webpack-plugin
目录下新建一个public文件夹,再新建一个index.html放到public目录下
2.配置html-webpack-plugin 和 webpack-dev-server
```
const path = require('path');
//vue-loader@next版本之后需要引入这个插件
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js', //打包的入口
//设置打包的出口
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
clean:true //每次打包会清除之前的代码
},
/...中间代码忽略.../
plugins:[
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
filename:'index.html', //配置输出后的html文件名(可携带目录)
template:'./public/index.html' //配置模板
})
],
//配置webpack-dev-server将dist下的目录代理到web server
devServer: {
static:'./dist'
}
};
```
3.添加启动命令
4.启动项目
安装各种工具
1.使用less和less的解析器
npm install less less-loader
…
webpack.config.js
//在module下的rules添加解析less的规则
{
test:/.less$/,
use:[
{loader:‘style-loader’},
{loader:‘css-loader’},
{loader:‘less-loader’}
]
}
…
2.使用Typescript
安装ts和ts的解析模块
npm install typescript ts-loader
安装 vue-class-component
npm install vue-class-component
webpack.config.js增加配置
resolve:{
alias: {
'@': path.join(__dirname, 'src')
},
extensions: ['vue', '.js', '.ts']
},
...
rules:[
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options:{
appendTsSuffixTo:[/\.vue$/],
}
},
]
项目根目录新建一个tsconfig.json文件
"compilerOptions": {
"sourceMap": true,
// 严格模式
"strict": true,
// 处理模块
"moduleResolution": "node",
// 编译输出 ES5 版本
"target": "es5",
// 启用装饰器
"experimentalDecorators": true
}
}
src目录下的main.js,改个后缀就可以了,把js改成ts。
src目录下新增一个声明文件shims-vue.d.ts
declare module ‘*.vue’ {
import type { DefineComponent } from ‘vue’
const component: DefineComponent<{}, {}, any>
export default component
}
原文博主地址https://blog.csdn.net/meis27461/article/details/120035131