Vue3+webpack4框架搭建

我就是我 2023-01-22 11:50 57阅读 0赞

1、安装 vue3脚手架

搭建一个基于vue-cli3的项目框架

下载vue-cli

官方文档：[https://www.vue3js.cn/docs/zh/guide/installation.html\#npm][https_www.vue3js.cn_docs_zh_guide_installation.html_npm]

yarn global add @vue/cli@next
    # OR
    npm install -g @vue/cli@next

运行以下命令来创建一个新项目

vue create vue3-demo

创建好后 会要求你选择哪种预设模式，有几项默认配置后面注有相关模块。最后一个为使用手动配置。（第一个是我手动配置是保存的）

![20210520091100744.png][]

这里选择手动配置（按 上下箭头选择），出现如下选项，选择你需要的（按空格键选择，选择后显示 \*）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70][]

确定后选择3.x版本

![20210520092043858.png][]

回车之后还会有一些选项需要确认。

这一项是询问是否开启路由的history历史模式，输入Y就开始历史模式，输入n就使用默认的hash哈希模式。关于哈希模式和历史模式的区别，详见[官方文档这里][Link 1]。

![202105200922132.png][]

css预处理器

![20210520113059991.png][]

eslint配置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 2][]

![20210520092601304.png][]

择在哪里存放Babel，postcss，eslint等配置。如果项目不大可以选择放在package.json里面。但是为了规范起见，最好还是选择第一项，放在专用的配置文件中。

最后还会询问你是否将本次配置作为以后的默认配置，建议N，因为每个项目的情况很可能不一样。

![20210520092634803.png][]

确认后开始创建项目，项目创建完成后会生成如下目录

![20210520092948276.png][]

执行命令

npm run serve

成功后会看到如下页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 3][]

接下来进行webpack的打包配置

package.json

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 4][]

新建 build文件夹，创建 webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js, env.js结构如下：

![20210520114247784.png][]

env.js

export default "development";

webpack.base.config.js

webpack.dev.config.js

生产环境配置  webpack.prod.config.js

配置完成后使用  npm run dev      、   npm run build  命令就可以启动/打包项目了

以上webpack 配置为一些简单的打包配置，可以根据自己的需要添加或修改更多配置

源码地址 ：[https://github.com/shuiyi24/vue3-demo.git][https_github.com_shuiyi24_vue3-demo.git]

[https_www.vue3js.cn_docs_zh_guide_installation.html_npm]: https://www.vue3js.cn/docs/zh/guide/installation.html#npm
[20210520091100744.png]: /images/20221020/b72e3321cdf247318214c64cb58b963c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70]: /images/20221020/600c2fef68da4a879041556d5c2ad2fb.png
[20210520092043858.png]: /images/20221020/3cb6962a9d024a1e8ece4fd71be5aa94.png
[Link 1]: https://router.vuejs.org/zh/guide/essentials/history-mode.html
[202105200922132.png]: /images/20221020/ab0543254cd04f0e82ff36278a79bbfa.png
[20210520113059991.png]: /images/20221020/5eee5c5b05384d2182bfd2a437deaf16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 1]: /images/20221020/971267114ddf41d6a8539cbc06abdfe4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 2]: /images/20221020/40d8d0753f044965950ff8f3496a20ee.png
[20210520092601304.png]: /images/20221020/741f5714b4674582a27839b1f1d2c3c3.png
[20210520092634803.png]: /images/20221020/39006f2c450347e390251c01860a551c.png
[20210520092948276.png]: /images/20221020/0dbc115d8e574fc6a713029a0c26f498.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 3]: /images/20221020/4f39cadb76a64dfcafa624a47f63f600.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 4]: /images/20221020/b7601f9b43be4333b1a02517755d916c.png
[20210520114247784.png]: /images/20221020/7c11806ea4994dca870ba7d762096a43.png
[https_github.com_shuiyi24_vue3-demo.git]: https://github.com/shuiyi24/vue3-demo.git