vue 开发 docker_大前端开发环境准备

﹏ヽ暗。殇╰゛Y 2022-10-26 12:48 258阅读 0赞

![182c41f726a010c5dfffedcc6300b4f2.png][] ![45fc1532eb8ad0b07901eaed9fbce5e3.png][]

红豆生南国，

春来发几枝？

愿君多采撷，

此物最相思。

相思![b7f70a2bd8402ab7a81a2d227d8f9c2f.png][]

![3d8ac707-7362-eb11-8da9-e4434bdf6706.svg][] ![3f8ac707-7362-eb11-8da9-e4434bdf6706.svg][]

纤云弄巧，飞星传恨，银汉迢迢暗渡。金风玉露一相逢，便胜却人间无数。柔情似水，佳期如梦，忍顾鹊桥归路。

![408ac707-7362-eb11-8da9-e4434bdf6706.svg][] ![428ac707-7362-eb11-8da9-e4434bdf6706.svg][] ![438ac707-7362-eb11-8da9-e4434bdf6706.svg][]

开发环境准备

![448ac707-7362-eb11-8da9-e4434bdf6706.svg][] ![ad5ae4952967fe03a8c419b4b8af28e8.png][] ![5eae30db95755317c525ddcfabe47391.png][] ![7813dd1b10e9d3a19f27985cec6da23b.png][] ![9921d6fb83cb1cce37176f4ed26c76b5.png][] ![51eb4ea8533fe500c1ec0addad760fd6.png][] ![23d58af8b5bacaaf772708ef0475eb5b.png][] ![02ac4356cf07786f0fc2c9aac8e321bc.png][]

本地环境配置需要：Node.js，IDE，Vue-CLi，Linux 虚拟机自建环境，购买服务，安装Docker

具体介绍：

Node.js(npm/yarn) + nvm(node.js版本管理)

IDE(Webstorm/Vscode/Atom)

![36a6bbd05b4d32740b97e4b8155dc0ae.png][] ![538ac707-7362-eb11-8da9-e4434bdf6706.svg][]

Node.js

![548ac707-7362-eb11-8da9-e4434bdf6706.svg][] ![1a519c15e79746ea9adbf155b53ff769.png][] ![021103b1bd9216863dcb156cbbc1c95c.png][] ![752a2dca9e3e9341bd5eb5a406206730.png][]

Node.js官网地址：https://nodejs.org/zh-cn/

我们浏览器打开后会显示如下界面，推荐大家安装这个长期支持版本

![96f93dd7a482006072d32a4498ce7671.png][] ![d86835a587b346022399e7afe9270682.png][] ![38097c9f9fbcc02676be58116967a3d2.png][]

![fb7f743b83e5557bdc7e2c85b92ab0cb.png][]

![c1dd56c051ccbb986c907f2a01079de6.png][]

安装之后验证是否安装成功：

打开命令行输入npm -v, node -v

![f91f8bf244cdcf4b0633650362ecfe41.png][]

![c1dd56c051ccbb986c907f2a01079de6.png][]

如果网不好，下载不下来，我推荐大家安装国内加速镜像

这样会比较方便下载

![b5669c46b7b411c24081bd9ea03dada0.png][]

使用说明：

![b391be7bcbab8cd6fd9c4df9317c1c02.png][]

![c1dd56c051ccbb986c907f2a01079de6.png][] ![678ac707-7362-eb11-8da9-e4434bdf6706.svg][]

docker

![6a8ac707-7362-eb11-8da9-e4434bdf6706.svg][]

接下来安装docker服务

输入https://github.com/docker/docker-install

![5b528bd5566800b23f71a0a0bd647f47.png][]

具体使用看下面的介绍

![03c2f2e1750966d279744f34727d2ca4.png][]

欢迎使用适用于Windows的Docker Desktop！

Docker是一个用于创建容器化应用程序的完整开发平台，而Docker Desktop for

Windows是在Windows上开始使用Docker的最佳方式。

![ab3434b86bfe67a6321142f95228b87b.png][]

![c1dd56c051ccbb986c907f2a01079de6.png][] ![678ac707-7362-eb11-8da9-e4434bdf6706.svg][]

Vue-Cli

![6a8ac707-7362-eb11-8da9-e4434bdf6706.svg][] ![ba7bb26af8c65b7921e7cb630e55c189.png][] ![021103b1bd9216863dcb156cbbc1c95c.png][] ![d235fcc7f95dce016bccf58f82f9c089.png][] ![ff2764acf87643cdfc39a4ea488444e5.png][] ![10d52946512f7c47cae94f8f540695ab.png][] ![0fd48a83b1c4c90d74d423a73601ce39.png][] ![dcdfafd5fe23c4f7b4b693aebd1e7bf1.png][]

下面是关于Vue-Cli的安装介绍

首先介绍一下什么是脚手架工具：

脚手架是为了保证各施工过程顺利进行而搭设的工作平台。如果明白了脚手架在现实生活中的作用，那么，再来理解编程中的脚手架就容易了，有时我们听说前端脚手架工具，其实，这里的脚手架和现实中的脚手架类似，用人话讲就是一种工具，工地上的脚手架帮助工人施工，前端中的脚手架帮助编程人员完成各种工作，例如：代码编译、打包、压缩等，各种工具组合成一套编码环境，这种自己一步一步搭建环境的重复性劳动可以交给给脚手架工具来完成，你只需要在这种脚手架工具上完成自己的业务代码就行。

![4da0c786d6d6c40f2ad97b6de9831845.png][] ![dcdfafd5fe23c4f7b4b693aebd1e7bf1.png][]

再来什么是Vue-Cli：

Vue-Cli(基于 Vue.js 进行快速开发的完整系统)

在没有vue-cli之前，搭建一个开发环境你可能需要花几天的时间，如果你并不熟悉webpack的话，你还得再去把webpack的各种配置学习一遍，这样几天时间很快就过去了，而你还没有真正动手开始写自己的应用逻辑，为了让开发者从配置中解放出来，vue官方提供了一套vue-cli脚手架，它不仅确保了各种构建工具能够基于智能的默认配置即可平稳衔接，还提供了配置调整的灵活性。有了vue-cli之后，你就可以专注于自己项目的业务逻辑的编写了。

![4da0c786d6d6c40f2ad97b6de9831845.png][] ![dcdfafd5fe23c4f7b4b693aebd1e7bf1.png][]

安装命令:npm install -g @vue/cli

快速原型开发：npm install -g @vue/cli-service-global

查看当前vue-cli的版本

vue --version或者vue --V

注意：上面所有的通过npm install -g vue-cli安装vue-cli的方式，安装的版本最高只能是2.9.6，3以后的版本已不支持通过上面的这种方式进行安装了，升级方法：

首先需要卸载老版本

npm uninstall vue-cli -g

经过实际操作验证，仅仅是上面这种卸载还不行，必须要去安装目录中把安装文件全部手动删除才行，也可以在下面的安装指令的后面加上--force来强制清除老版本，安装新版本

npm install @vue/cli -g --force

接下来再通过vue --V查看，就会是最新的版本了。

![4da0c786d6d6c40f2ad97b6de9831845.png][] ![dcdfafd5fe23c4f7b4b693aebd1e7bf1.png][]

看看Vue-Cli的官网：https://cli.vuejs.org/zh/guide/

![078d145b9200e0e082122c3235c319b4.png][]

文章到这里就结束了，感谢阅读

![4da0c786d6d6c40f2ad97b6de9831845.png][] ![d01411bcf93c07ae957f20b060b3c5ee.png][] ![b0d093bc54792b94d4a828e0ca29061c.png][] ![3f000da47311eb2a5a4458cad97023d0.png][] ![ac7a588c534e2ded789502df952f0df9.png][] ![0f465626bfefe0999d0c794b199c2bc4.png][]

END

![871106ecd5a412528ec712c0c1f34bde.png][]

[182c41f726a010c5dfffedcc6300b4f2.png]: https://img-blog.csdnimg.cn/img_convert/182c41f726a010c5dfffedcc6300b4f2.png
[45fc1532eb8ad0b07901eaed9fbce5e3.png]: /images/20221024/c07a363d72b649b28584b28fef4fd629.png
[b7f70a2bd8402ab7a81a2d227d8f9c2f.png]: /images/20221024/58fa29ce8b314bd4b5e5b141e8605650.png
[3d8ac707-7362-eb11-8da9-e4434bdf6706.svg]: http://p04.5ceimg.com/content/3d8ac707-7362-eb11-8da9-e4434bdf6706.svg
[3f8ac707-7362-eb11-8da9-e4434bdf6706.svg]: /images/20221024/a3cca137f4a741cfa883a8744b21bde9.png
[408ac707-7362-eb11-8da9-e4434bdf6706.svg]: http://p04.5ceimg.com/content/408ac707-7362-eb11-8da9-e4434bdf6706.svg
[428ac707-7362-eb11-8da9-e4434bdf6706.svg]: http://p04.5ceimg.com/content/428ac707-7362-eb11-8da9-e4434bdf6706.svg
[438ac707-7362-eb11-8da9-e4434bdf6706.svg]: /images/20221024/31a9d32ca9e8468d9b5f8319323f092e.png
[448ac707-7362-eb11-8da9-e4434bdf6706.svg]: http://p04.5ceimg.com/content/448ac707-7362-eb11-8da9-e4434bdf6706.svg
[ad5ae4952967fe03a8c419b4b8af28e8.png]: https://img-blog.csdnimg.cn/img_convert/ad5ae4952967fe03a8c419b4b8af28e8.png
[5eae30db95755317c525ddcfabe47391.png]: https://img-blog.csdnimg.cn/img_convert/5eae30db95755317c525ddcfabe47391.png
[7813dd1b10e9d3a19f27985cec6da23b.png]: https://img-blog.csdnimg.cn/img_convert/7813dd1b10e9d3a19f27985cec6da23b.png
[9921d6fb83cb1cce37176f4ed26c76b5.png]: https://img-blog.csdnimg.cn/img_convert/9921d6fb83cb1cce37176f4ed26c76b5.png
[51eb4ea8533fe500c1ec0addad760fd6.png]: https://img-blog.csdnimg.cn/img_convert/51eb4ea8533fe500c1ec0addad760fd6.png
[23d58af8b5bacaaf772708ef0475eb5b.png]: https://img-blog.csdnimg.cn/img_convert/23d58af8b5bacaaf772708ef0475eb5b.png
[02ac4356cf07786f0fc2c9aac8e321bc.png]: /images/20221024/463671a95211459796a0f5879429b2e7.png
[36a6bbd05b4d32740b97e4b8155dc0ae.png]: https://img-blog.csdnimg.cn/img_convert/36a6bbd05b4d32740b97e4b8155dc0ae.png
[538ac707-7362-eb11-8da9-e4434bdf6706.svg]: /images/20221024/304f8160aa434dd4b64fa35c69aa95a0.png
[548ac707-7362-eb11-8da9-e4434bdf6706.svg]: http://p01.5ceimg.com/content/548ac707-7362-eb11-8da9-e4434bdf6706.svg
[1a519c15e79746ea9adbf155b53ff769.png]: https://img-blog.csdnimg.cn/img_convert/1a519c15e79746ea9adbf155b53ff769.png
[021103b1bd9216863dcb156cbbc1c95c.png]: https://img-blog.csdnimg.cn/img_convert/021103b1bd9216863dcb156cbbc1c95c.png
[752a2dca9e3e9341bd5eb5a406206730.png]: /images/20221024/80cdc902935444159ec198e2d6d50db3.png
[96f93dd7a482006072d32a4498ce7671.png]: https://img-blog.csdnimg.cn/img_convert/96f93dd7a482006072d32a4498ce7671.png
[d86835a587b346022399e7afe9270682.png]: https://img-blog.csdnimg.cn/img_convert/d86835a587b346022399e7afe9270682.png
[38097c9f9fbcc02676be58116967a3d2.png]: /images/20221024/446522f671f74c9e92b7f542e3335912.png
[fb7f743b83e5557bdc7e2c85b92ab0cb.png]: /images/20221024/7679d90e0d5349e09672db78bc9fe272.png
[c1dd56c051ccbb986c907f2a01079de6.png]: /images/20221024/62a73a2f133f43f6b5daad9f96a6fa92.png
[f91f8bf244cdcf4b0633650362ecfe41.png]: /images/20221024/ff5c5f2e015846ed8809804eff08f536.png
[b5669c46b7b411c24081bd9ea03dada0.png]: /images/20221024/dd29f4aabaa347a0bc8198c3afe8a56c.png
[b391be7bcbab8cd6fd9c4df9317c1c02.png]: /images/20221024/1124f50c3dd04b86876f9d7452b28a15.png
[678ac707-7362-eb11-8da9-e4434bdf6706.svg]: /images/20221024/97adbbdf91c84a4ebc5ae6eca6e681c1.png
[6a8ac707-7362-eb11-8da9-e4434bdf6706.svg]: /images/20221024/15ff969cb7974fc2925852ae135f46a7.png
[5b528bd5566800b23f71a0a0bd647f47.png]: /images/20221024/e8021cbde76741fba7704fbb925608a1.png
[03c2f2e1750966d279744f34727d2ca4.png]: /images/20221024/5b2c49163fd644be8221550356c2ea96.png
[ab3434b86bfe67a6321142f95228b87b.png]: /images/20221024/d7fcd005c5db46e8babe1625998a9084.png
[ba7bb26af8c65b7921e7cb630e55c189.png]: https://img-blog.csdnimg.cn/img_convert/ba7bb26af8c65b7921e7cb630e55c189.png
[d235fcc7f95dce016bccf58f82f9c089.png]: https://img-blog.csdnimg.cn/img_convert/d235fcc7f95dce016bccf58f82f9c089.png
[ff2764acf87643cdfc39a4ea488444e5.png]: https://img-blog.csdnimg.cn/img_convert/ff2764acf87643cdfc39a4ea488444e5.png
[10d52946512f7c47cae94f8f540695ab.png]: https://img-blog.csdnimg.cn/img_convert/10d52946512f7c47cae94f8f540695ab.png
[0fd48a83b1c4c90d74d423a73601ce39.png]: https://img-blog.csdnimg.cn/img_convert/0fd48a83b1c4c90d74d423a73601ce39.png
[dcdfafd5fe23c4f7b4b693aebd1e7bf1.png]: /images/20221024/38575f2c5f45474c84db95e9c17ea711.png
[4da0c786d6d6c40f2ad97b6de9831845.png]: https://img-blog.csdnimg.cn/img_convert/4da0c786d6d6c40f2ad97b6de9831845.png
[078d145b9200e0e082122c3235c319b4.png]: /images/20221024/4518c4242aba4acb84a9982ff0926b05.png
[d01411bcf93c07ae957f20b060b3c5ee.png]: https://img-blog.csdnimg.cn/img_convert/d01411bcf93c07ae957f20b060b3c5ee.png
[b0d093bc54792b94d4a828e0ca29061c.png]: https://img-blog.csdnimg.cn/img_convert/b0d093bc54792b94d4a828e0ca29061c.png
[3f000da47311eb2a5a4458cad97023d0.png]: https://img-blog.csdnimg.cn/img_convert/3f000da47311eb2a5a4458cad97023d0.png
[ac7a588c534e2ded789502df952f0df9.png]: https://img-blog.csdnimg.cn/img_convert/ac7a588c534e2ded789502df952f0df9.png
[0f465626bfefe0999d0c794b199c2bc4.png]: /images/20221024/d4f45a58b3b64cb3a244be327ce945d4.png
[871106ecd5a412528ec712c0c1f34bde.png]: /images/20221024/b760ef6ce9974532bed1c62fff516a8d.png