<div id="js_content">
<h2>前言</h2>
<p>2020年9月18日，vue3正式版发布了，前几天把文档整体读了一遍，感触很深，可以解决我项目中的一些痛点，于是就决定重构之前那个vue2的开源项目。</p>
<p>本篇文章就记录下重构vue2项目的过程，欢迎各位感兴趣的开发者阅读本文。</p>
<h2>环境搭建</h2>
<p>本来打算使用<code>vite + vue3 + VueRouter + vuex + typescript</code>来构架项目的，但是经过一番折腾后发现<code>vite</code>目前只对vue支持，对于vue周边的一些库还没做到支持，没法在项目中使用。</p>
<p>最后，还是决定使用<code>Vue Cli 4.5</code>来构建了。</p>
<p>虽然vite目前还无法正常在项目中使用，但是我也折腾了一回，就记录下在折腾时的过程以及一些报错。</p>
<h3>使用vite构建项目</h3>
<p>本文采用的包管理工具为<code>yarn</code>，将其升级至最新版本就可以正常创建vite项目了。</p>
<h4>初始化项目</h4>
<p>接下来，我们来看看具体步骤。</p>
<ul><li><p>打开终端，进入你的项目目录，运行命令：<code>yarn crete vite-app vite-project</code>，该命令用于创建一个名为<code>vite-project</code>的项目。<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-3b6bc8b18efe20335d4e33372f0b86ef"></p></li><li><p>创建完成后，会得到如下所示的文件。<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-6ce6ef4b3787708232c994314643c1b2"></p></li><li><p>进入创建好的项目，运行命令：<code>yarn install</code>，该命令会安装<code>package.json</code>中声明的依赖。<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-7884b3ed5a76d9e399b5d1b6f5b59cae"></p></li><li><p>我们使用<code>IDE</code>打开刚才创建的项目，整体项目如下所示，vite官方为我们提供了一个简单的demo。<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-7087fb258f9814bb0c110052a63da0bd"></p></li><li><p>打开<code>package.json</code>查看启动命令在终端运行命令：<code>yarn run dev</code>或者点击<code>ide</code>的运行图标来启动项目。<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-5ee7b0976f68b4709c43254db43da1b5"></p></li><li><p>大功告成，浏览器访问 <code>http://localhost:3000/</code>，如下所示。<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-2441fcc237ec1b85cadb9f1a0f003ff0"></p></li></ul>
<h4>集成Vue周边库</h4>
<p>我们将<code>Vue CLI</code>初始化的项目文件替换到用<code>vite</code>初始化的项目中去，然后修改<code>packge.json</code>中的相关依赖，然后重新安装依赖即可。</p>
<p>具体过程如下：</p>
<ul><li><p>替换文件，替换后的项目目录如下所示。<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-24a91a4d329d9c5bc11af6c26eb007fd"></p></li><li><p>从<code>package.json</code>中提取我们需要的依赖，提取后的文件下。</p></li></ul>
<pre class="blockcode"><code class="language-go">{
"name": "vite-project",
"version": "0.1.0",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0-0",
"vue-class-component": "^8.0.0-0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"vite": "^1.0.0-rc.1",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0",
"@vue/compiler-sfc": "^3.0.0-0",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^5.0.2",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^7.0.0-0",
"node-sass": "^4.12.0",
"prettier": "^1.19.1",
"sass-loader": "^8.0.2",
"typescript": "~3.9.3"
},
"license": "MIT"
}
</code></pre>
<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-cff2cc2231d9f3b43917f9eecc6f9dcc">
<figcaption>
8abcc9f5b934568e54c0229c6663866c
</figcaption>
<ul><li><p>启动项目，没报错，嘴角疯狂上扬。<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-29ea5c9a63f918830c934ab3a8aab8ce"></p></li><li><p>浏览器访问后，空白页面，打开<code>console</code>后，发现<code>main.js 404</code><img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-9dd2c39287b0a3d7492ed4938034654f"></p></li></ul>
<p>难搞，找不到<code>main.js</code>，那我把<code>main.ts</code>后缀改一下试试。将后缀改成<code>js</code>后，文件是不报错404了，但是又有了新的错误。<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-856edef7a0b5 |
|
转播
