Vue项目搭建基础流程

创建项目

vue创建项目通过 vue create my-project 命令进行创建

选择项目功能，这里我们选择自定义所需的功能

通常我们会选择如下选项

每个选项的解释

Babel：js编译器

Typescript：js的超集

Progressive Web App Support:渐进式的网页应用程序

Router:vue的路由

Vuex:vue的状态管理

CSS Pre-processors:css的预处理器

Linter/Formatter:代码风格检测与格式化(如果自己代码不是很规范的话可以用这个约束下自己,也可不选择，按照自己的风格)

Unit Testing:单元测试

E2E Testing:端对端测试

选择要创建项目的版本，根据自己的需求选择，vue3不支持ie11，我们选择vue2居多

选择路由模式，通常使用history，这里我们输入y

选择css预处理器，一般选择less或sass

选择Babel、ESLint等的配置文件是放在哪里，我们选择放在专用的文件中

选择项目预设，供将来使用，你选择是的话，下次创建项目，可以选择此模板直接进行创建，就不用在一个一个选择了，我这里就选择否了。

完善vue项目目录在src目录中创建utils目录，在utils中新建request.js文件，用来封装axios请求，（axios需单独安装，具体安装方式自行百度）

 

在src目录中新建api目录，在api目录中新建模块目录（模块目录为你在views目录下新建的文件夹名称，比如，你在views目录中建了users目录，那你在api目录当中也新建users目录），然后再/src/api/users/中新建index.js文件，用来存放users目录中所使用到的接口

 

在src中新建layout目录，用来存放公共布局文件(一般项目布局都会有顶部，侧边栏，底部等模块)，在layout目录中新建components目录，将每个公共布局文件，当成一个组件，然后再layout目录中新建layout.vue文件，用来组合页面布局

 

路由文件中，一般登录页是不需要顶部，侧边栏，底部的，我们在路由文件中正常引入既可

 

登录之后，进入首页，一般就需要公共布局文件了，我们写路由的时候可以用到children。

【临沂小程序定制开发公司】艾思软件:http://www.aisisoft.cn