vue-cli 4.0搭建环境踩坑日记

vue解析

什么是vue?它是能够开发前后端项目，实现数据绑定、路由配置、项目编译打包等一系列工作的渐进式技术框架。注意它是一系列的工具的总称，而不单单指vue.js这个文件。具体有哪些呢？如下：

1. vue.js 核心，没啥可说的。
2. VueRouter 官方的路由管理器。
3. nodejs 前端开发环境。
4. npm node官方的包管理器，管理依赖包，当然也可以选择yarn。
5. axios ajax接口请求工具，或者有fetch可以选择。
6. sass-loader 和 node-sass css预处理器。
7. element-ui 基于 vue2.0 的桌面端组件库，现在有基于vue 3.0的element-plus。
8. vue-cli vue项目脚手架，利用它可以快速搭建vue开发环境。

 在搭建环境之前，要先下载nodejs，可在官网下载适合自己系统的版本https://nodejs.org/zh-cn/。以下节选自Vue CLI官网。

好，nodejs安装完成后我们就可以着手搭建了，注意npm要更新最新版。

1、安装vue的脚手架@vue/cli

$ npm install -g @vue/cli

出现上面界面说明安装成功了，然后查看一下版本号，记得“V”是大写的。ps：这一步可以不执行，结果已经告诉你版本号了。

2、创建一个项目

如果想使用版本2的方式需要安装全局网桥，

$ npm install -g @vue/cli-init

然后执行下面的命令。

$ vue init webpack vuedemo

 界面如下：

或者直接就使用新版命令

$ vue create vuedemo

想省时间就选择Default模式，我选择手动，主要想看下都有哪些选项。

Choose Vue Version ：选择vue版本； 

Babel ：JavaScript 的编译器；

TypeScript ：支持TypeScript书写源码；

Progressive Web App (PWA) Support : PWA支持，看着陌生，看项目需求选择；

Router : 路由；

Vuex：状态管理，中小型项目用不上；

CSS Pre-processors：css预处理；

Linter / Formatter：统一代码分风格；

Unit Testing：单元测试，不需要；

E2E Testing：端对端测试，不需要。

后续选择如下图所示： 

路由选择中，y选择history，但需要对后端设置；n选择hash，即即地址栏URL中的 # 符号，它会在url中加一个#。

css预处理选择中，node-sass是实时自动编译的；dart-sass是保存后才会编译。

ESlint代码校验中，ESLint + Prettier使用较多的。

选择什么时候进行校验，Lint on save 保存就检查，Lint and fix on commit 是当 fix 或 commit 时检查。

选择如何保存配置，In dedicated config files 存放到config独立文件中，In package.json 存放到 package.json。

出现下面的界面就说明环境搭建成功！！！

然而就算是如此简单的过程它也会给你出些幺蛾子，(两次选择默认模式都是一次性成功的)我整整弄了4个小时，网上各种查阅，后来就要放弃了，想想再试一次吧，真的结果竟然莫名其妙就好了，下面是我所做的所有尝试：

（1）第一次出错

Error: Can't find Python executable "python", you can set the PYTHON env variable

忘记截图了，所以用文字呈现一下，这个错误说的是缺少python环境，于是我执行了下面命令：

$ npm install --global --production windows-build-tools
$ npm install -g node-gyp

 然后在C:\Windows\System32里找到一个名为.windows-build-tools的文件夹，

点击python-2.7.15.amd64.msi，遗憾的是我没有找到，所以我还是在python官网（https://www.python.org/downloads/）下载了一个2.7.18版本，

安装过程我没有截图保存，但是下面这个选项要选上，我安装在C盘，

安装完成后测试一下是否安装成功，在终端输入

到这里python安装成功了，那么我们配置环境变量，电脑>[右键]属性>高级系统设置>环境变量>系统环境变量>path，然后点击编辑，将pyhton添加到path中。

最后配置npm

$ npm config set python "C:\Python27\python.exe"
$ npm config set node-gyp "C:\Users\Gaobin\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js"

 好了，该下载的下载了，该配置的配置了，再试试，What?! Oh My God！！

（2）第二次出错

gyp ERR! build error gyp ERR! stack Error: `C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe failed:code 1

ps：我将vscode终端拆分后，左侧就显示不全了，所以没法截图~~~

某度上都说要升级gyp，那我试试吧，然后又报了别的错误。

 

我安装了淘宝源镜像，也使用过淘宝源镜像代理，就反复尝试，但是错误依旧，那就试试下面的命令吧。

$ npm config get proxy
$ npm config get https-proxy
$ npm config set registry https://registry.npm.taobao.org
$ npm config set strict-ssl false
$ npm cache clean --force

 所有命令尝试过后错误依旧，此时此刻我已经心灰意冷了，算了，试最后一次创建项目，这次竟然成功了！！！简直不能相信，所以最后到底是怎么好的，我还是不知道。。。但是不要纠结了，不断学习之后终会有答案。

 在踩坑过程中终端一直打印出这么一句话The fs.promises API is experimental，看到好几次它终于引起了我的注意，原来它是提示我node的版本不是最新的，而在项目引入的模块是最新的，于是我在node官网下载了长期支持版。

3、运行

$ cd vuedemo
$ npm run serve

创建成功后终端已经告知了这两个命令。 

4、查看

在浏览器地址栏输入http://localhost:8080/后回车

重返前端，文章若有错误之处，还请各路大神及时指出，以免误人子弟。

肺腑之言

做了一年的全职妈妈，现在决定重新做回老本行——前端开发，这是我花了一两天时间查阅vue-cli官网以及学习各大技术论坛上大牛的文章从零开始搭建的环境。两天的时间听上去好像我回到了菜鸟时代，但是我不得不承认我熟悉电脑一些操作以及常见命令花了一些时间，而且之前搭建环境是vue-cli 2.0版本，重新上网我才知道已经更新到4.0了，步骤上稍微有些改变，让我赶紧赶上这时髦吧，不断学习不断成长！！如果哪位同行有缘看到了此篇文章，并给出赞许，那可以考虑一下我们愉快地成为同事噢！