前端开发环境的搭建

1.前端开发环境：

1.1 安装开发工具 Visual Studio Code（安装过程这里省略）

1.2 安装NodeJs

     安装教程可以参考如下文章：

       https://blog.csdn.net/qq_38661184/article/details/108795759

      安装好nodejs之后，可以通过npm命令来下载各种工具，因为我把npm的模块下载仓库从默认的国外站点换成国内站点，所以这里是通过cnpm命令来下载各种工具的。

1.3 安装 webpack 打包工具

     webpack安装命令： cnpm install webpack -g

如下图则表示安装成功：

安装成功后可以在nodejs的目录下看到一个webpack的文件夹：

webpack 中文文档链接：https://www.webpackjs.com/concepts/

1.4 安装 yarn 包管理器（可安装可不安装）

      yarn 是Facebook发布的nodejs包管理器，比npm更快、更高效，可以使用yarn代替npm使用。

      yarn可以用npm命令来安装：npm i yarn -g -verbose

如下图表示安装成功：

安装成功后，同样可以在nodejs的目录下看到yarn的文件夹

因为npm官方源访问的速度比较慢，建议在使用之前切换为淘宝的镜像，在yarn安装完毕之后执行如下指令：

yarn config set registry https://registry.npm.taobao.org  执行成功后如下图所示：

yarn 中文官网链接 https://yarn.bootcss.com/docs/

1.5 安装 vue-cli

      vue-cli是vue脚手架项目初始化工具，使用yarn安装的命令如下：yarn global add @vue-cli

安装成功如下图所示:

输入 vue --version查看vue 版本号时可能会出现提示：'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件，解决办法用另一篇文章单独记录下来了：https://blog.csdn.net/qq_38661184/article/details/108847406

1.6 创建项目

      基本的环境已经搭建好了，现在通过vue-cli来创建一个项目，名称为 test-world，命令：vue create test-world

创建项目会有3个选项，我这里选择的是 Dufault <Vue 3 Preview> ([Vue 3] babel,eslint)

创建成功后截图如下：

根据提示 输入命令 先去到项目的目录下 cd test-world

输入 yarn serve 执行项目：

项目初始页面运行结果如下：