这是我参与「第四届青训营 」笔记创作活动的第1天

本文是在和小伙伴共同讨论并创作项目的时候，针对于搭建前端写代码环境以及中途遇见的bug做的总结和思考。

步骤1：下载软件

首先当然是下载编译软件vscode，然后再下载node.js。

步骤2：检测版本

版本在开发中是个非常重要的问题，有些版本不稳定，以及各包之间也有适配性的问题，所以需要特别注意。

可用node -v和npm -v检测node环境是否安装成功。

安装成功node.js后就能在终端使用npm，同时也能继续全局安装cnpm，中文名叫淘宝镜像，我做的项目没有需要用到cnpm的，此处不安装。

步骤3：全局安装脚手架

npm install -g @vue/cli

查看vue版本 vue -V（注意大写）

步骤4：新建vue项目

vue create admin

vue命名不能用大写字母

步骤5：安装element ui

npm i element-ui --save-dev

步骤6：引入element-ui

在main.js中引入，官方文档有写

import ElementUI from'element-ui';

import'element-ui/lib/theme-chalk/index.css';

全局引入会把element-ui都下载进去，所以我们更推荐按需引入。

步骤7：安装路由

npm i vue-router@3.2.0

(注意：安装版本要与vue的版本对应，不然会出错）

步骤8：引入路由

在main.js中 import router

（我这里创建vue的时候直接有了router）

步骤9：还需要下载less和less-loader(less解析器)

npm i less

npm i less-loader@5.0.0

步骤10：最后需要引入axios

先下载axios依赖

npm install axios

文档链接：axios-js.com/zh-cn/docs/

然后在main.js中引入axios

因为axios不是插件，要使用需要绑定在vue prototype

`import http from 'axios'

Vue.prototype.$http=http`

然后在home页面输入官方的引入：

`mounted()：{

this.$http. get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
}); ` 此时看network就能看到页面发出的请求，则axios引入成功。

感想

在做vue项目安装环境的时候发现许多报错，大部分都是版本对应不上导致的，在搜索bug的时候发现大部分人也有类似的问题，不由得感叹怪不得许多人的编程之旅都停留在起步阶段。希望后续能找到匹配版本的相关笔记。