vue.js+Typescript 学习环境搭建

最简单的解决方案其实是使用 vite 和 vue3.x，零配置！我现在毕设前端项目使用该解决方案，非常方便。

毕设的前端项目打算使用 vue.js+typescript+vue-baidu-map+layUI搭建。不过现在面临的一个主要问题是我对 vue 完全不懂，而它又是我的项目不可或缺的……vue 那超级强大的数据绑定功能对这个项目实在太重要了，可以说离开 vue 我根本找不到切入点，所以必须硬着头皮上。

现阶段我并不打算直接开始做前端项目，而是先写一些小项目练习 typescript 和 vue.js。而这篇文章的目的则是搭建一个适合学习的环境。我当前所阅读的书籍是《Vue.js 项目实战》，它完全没有使用 vue-cli，全是在浏览器中进行的，因此我也选择不使用 vue-cli（但是毕设我肯定是要用 vue-cli 来生成项目的），不使用 webpack 中除 ts-loader 以外的其他 loader。具体说来有这样的目标——

• 以./src/index.js为 entry，生成./dist/index.js（这里限定文件名为 index.js，是因为默认的名称 main.js 在我的电脑上总会有一些奇怪的 bug）
• 只使用 ts-loader，也就是说不能在 ts 文件里 import 除 js/ts 以外的其他文件
• html 硬编码手动引入 js 以及其他资源（如 css），不使用 webpack 所提供的插件
• 使用 http-server 作为服务器，使用webpack --watch命令来自动编译
• 不使用 vue-cli
• 正确引入 vue

那么，开始吧。

初始化 webpack 项目

总之首先创建一个空目录，cd 进去，输入命令webpack init（当然，在此之前需要安装 webpack）——

$ webpack init
# 下面是对各种选项的选择
? Will your application have multiple bundles? No
? Which will be your application entry point? src/index
? In which folder do you want to store your generated bundles? dist
? Will you use one of the below JS solutions? Typescript
? Will you use one of the below CSS solutions? No
? Do you want to use webpack-dev-server? No
? Do you want to simplify the creation of HTML files for your bundle? No
? Do you want to add PWA support? No

这已经初始化完成项目了，先运行一次npm run build进行一次编译以创建 dist 文件夹（或者手动创建，没什么区别），并将项目根目录下 index.html 文件移入 dist 文件夹中并编辑，在 body 尾部引入 index.js。

编辑配置文件

接下来需要编辑 webpack.config.js，和 package.json。

编辑 package.json

对 package.json 的编辑实际上只需要在 scripts 中插入一个命令——

...
"scripts": {
    "build": "webpack",
    "watch": "webpack --watch & http-server -p 8080 -s ./dist/"
  },
...

这样，只需输入npm run watch便可启动一个服务器并自动进行编译了。这里的 http-server 加入-s 命令以不进行输出（它的输出信息一般来说没啥意义）。

这种方式好像关闭比较麻烦……得手动 kill 才行，我对 bash 理解不多，不知道如何解决。

编辑 webpack.config.js

对 webpack.config.js 文件的编辑也只需要更改一处地方——给 entry 定义名称为 index 以正确生成文件。/dist/index.js，否则默认的名称是 main.js。

...
entry: {index : './src/index.ts'},
...

测试是否搭建成功

在 src 文件夹中中创建（编辑）两个文件——

// util.ts
function hello() {
    console.log("hello, happy world!");
}
export {
    hello
}

// index.ts，入口文件
import * as util from "./util"
console.log('Hello World from your main file!');
util.hello();

输入npm run watch并进入 localhost:8080，检查 console 是否有正确输出。

引入 vue.js

输入npm i vue安装 vue 模块，然后编辑。/node_module/vue/package.json，删除 main 项和 module 项的值中的 runtime——

...
"main": "dist/vue.common.js",
"module": "dist/vue.esm.js",
...

这一步（似乎）是因为这个模块默认导入的是运行时的模块，模板功能无法使用。网络上建议通过编辑 vue.config.js 来调整，但这里的项目并非使用 vue-cli 搭建，即使配置也无效果，所以就先暂且这样。

编辑 tsconfig.json

在 compilerOptions 中插入——

"moduleResolution":"Node",
"strict": true,

需要注意的是，使用了 strict 选项后需要自己声明一些玩意，参见 这里。

测试 vue 是否成功引入

编辑 index.html，在 body 中插入一个 div 作为 Vue 的 el。

<div id="root">
    <p>{{message}}</p>
    <input v-model="message"/>
</div>

编辑 index.ts 文件，初始化 Vue 对象。

import Vue from "vue";

type Data = {
    message: string
}

const vue = new Vue({
    el: "#root",
    data: function () : Data {
        return {
            message: "hello, happy world!"
        }
    }
});

输入npm run watch，进入 localhost:8080，随意向文本框中输入内容，观察 p 标签中内容是否改变。