无脚手架搭建vue3.0 + ts

无脚手架搭建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