新建vue项目详解版

一、新建vue项目

1.新建文件夹，文件名最好是要开发的工程名

2.在vscode或其他编译器的终端cd到对应目录：

3.在此目录下执行vue create .命令，“.” 代表在当前文件夹下新建vue项目（如果没有vue，需要安装）

4.为项目选配，按这个选就可以，日常项目都可

5.输入npm run serve即可运行新建的项目

运行结果如下：

二、配置vue项目

最开始项目的原始目录是这样的

保存时即格式化

页面配置

1.将App.vue原代码进行修改，home如果不用就也删掉！

2.删除不需要的about.vue页面，新增需要开发的新页面test.vue

（此处修改了目录层级，home里引用的也要改呦~不然会报错）

3.修改路由

插：eslint报错

解决办法：1.将package.json中的”@vue/standard”删掉即可彻底摆脱eslint检验

解决办法：2，控制台输入vue ui打开GUI界面，找到配置，将eslint开关关掉，并点击刷新按钮，重启项目。

api配置

新增api文件夹，

可以新建server.js文件，将接口的公共部分存成一个变量，使代码更工程化。比如：

而后不同文件的接口放入api目录下不同的文件夹下，比如regist页面的api统一放在regist文件夹下：

这里使用的是axios——基于promise的http库，在终端里npm install axios后就在main.js里引入，如图所示：—-就可以使用了，十分方便简洁。

可以阅读axios中文文档了解更多axios内容。
在api目录下配置过接口后，在页面中应用举例：

配置基本结束了，可以自主开发啦~