网上找了半天Vue项目搭建指南，没找到比较满意的，于是打算自己打造一个攻略，汇集大家的力量。（排版不好，有点强迫症，觉得写的有问题可以留言指正，如果觉得写的太烂，不好的地方可以留言，有不好的地方欢迎大家吐槽）。在构建项目之前，您首先需要一台计算机。建议开发的电脑内存8G以上，16G，土豪随意。Node标准稳定版，不建议使用最新的测试版，因为最新的测试版总是有各种奇怪的bug，会导致启动项目时报各种错误。最重要的是，这些问题非常严重。定位难，更别说解决了，npm建议升级到最新版本的vscode编辑器，启动速度快，缺点插件需要自己下载。chrome浏览器，chrome浏览器的调试插件，真的很友好。本次技术栈的搭建主要使用1.Vue2.VueRouter3.Vuex4.axios5.elementUI6.webpack7.node开始搭建1.创建项目文件夹个人比较喜欢用cmd创建文件夹，毕竟接下来下载vue-cli的官方脚手架还是有用的。mkdirvue-cli-project//创建vue项目文件夹cd.vue-cli-project//进入vue项目文件夹npmi-gcnpm//全局安装cnpm（淘宝镜像）npmi-gvue-cli//安装vue脚手架2.创建项目文件夹后，首先初始化项目#vueinit[vue-cli模板名称][项目文件夹]vueinitwebpack出现如下图，表示项目初始化完成，然后安装取决于cnpmi2。现在我们的项目已经初步搭建完成，我们可以尝试运行npmrundev来测试是否正常运行。如果你能在浏览器中看到下图，说明我们目前搭建的一切正常，项目跑到第一个坑了。当我们运行npmrundev时，我们发现我们的代码并没有帮助我们自动打开浏览器。这里我们需要修改webpack.json文件中的一个值，找到脚本行，在dev后面加上--open，这样运行代码后会自动为我们打开浏览器。规范项目文件夹先说说为什么要规范我们的项目文件夹。我们正在建设一个项目。一般会有公共方法文件（tools.js）、静态资源（图片、字体、字体图标）、项目配置文件、webpack打包文件夹（打包时自动生成）、业务文件等，如果都放一起，改了某个文件就不好找了，真的很乱，（吐槽神略500+字）...项目文件结构├─build#构建脚本，主要用来打包运行配置特定环境下的脚本│├─config#配置运行脚本的附件文件│├─src#代码资源文件夹│├─appConfig#业务配置文件夹，一般存放，外部链接，请求api，全局组件统一配置文件等。│├─assets#静态资源文件夹│├─components#全局组件文件│├─lib#工具类│├─locale#国际I18N配置文件夹│├─router#路由配置文件夹│├─store#Vuex配置wen'jian'jia│├─style#全局样式配置文件夹│└─views#业务文件夹└─static#外部静态配置文件这样我们的文件目录就设置好了接下来我们来实现具体的配置。
