1 环境准备
1.1 安装 Node JS
在官网下载 Node JS 最新稳定版进行安装，安装完成后分别输入命令 node -v 和 npm -v 查看 node 版本与 npm 版本。无论是 NodeJS 还是 Vue-Cli，都不建议版本低于我的，我的版本信息如下：
MacBook-Pro ~ % node -v
v10.15.3
MacBook-Pro ~ % npm -v
6.14.6
1.2 安装 Vue-Cli 4
npm install -g @vue/cli
安装完成后，使用命令 vue --version 查看 vue-cli 的版本号：
MacBook-Pro ~ % vue --version
@vue/cli 4.4.6
2 初始化工程
2.1 创建工程
在本地创建一个文件夹（目录）用于存放这个平台前端的所有代码 （随着后续组件库及微前端、命令行的开发，前端不是仅一个单体工程，而是多个工程），在 命令行（CMD、Terminal）中进入该目录，执行命令：
vue create dscloudy-admin-single
回车后，按照如下步骤进行有关选择：
1、选择预设 preset：
? Please pick a preset:
dscloudy-common (router, vuex, dart-sass, babel, eslint)
default (babel, eslint)
❯ Manually select features
一般只有两个选型：默认（default）和手动选择（Manually select features），我选择后者，手动选择。
2、选择项目需要的功能：
? Check the features needed for your project:
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◉ Vuex
❯◉ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
我选择 Babel、Router、Vuex、CSS Pre-processors、Linter / Formatter。
3、路由是否使用 history 模式：
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
现在无论使用 history 或 hash 都行，反正后面可以修改。我就直接回车了（history 模式）
4、选择 CSS 预处理器：
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
由于 Element-UI 采用 SCSS 作为 CSS 预处理器，我习惯使用 Sass/SCSS (with dart-sass) ，选择第一项。
5、选择 ESLint 的配置：
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
ESLint + Airbnb config
❯ ESLint + Standard config
ESLint + Prettier
我一直使用标准配置，选择第三项：ESLint + Standard config。 适当插一句，部分教程喜欢关闭 ESLint 等语法或代码检测，个人不推荐这么做。无论是学习还是实战，代码质量是重中之重的，实现功能只需要时间，但代码风格反应一个人的素质及认知。例如：定义了未使用到的变量，既然没有使用到，你留着干嘛？ 规定两个空格，你为什么要加4个？ 这无关强迫症，而是代码的整洁之道。无规矩不成方圆，一个团队如果不统一标准，那每个人写的风格都五花八门，后续还怎么维护？ 跟着文章实践的伙伴们，一定要开启 ESLint！！
6、选择检测的触发点：
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save
◯ Lint and fix on commit
强烈要求选择 Lint on save, 保存时校验。
7、选择配置文件的存放方式：
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.json
我选择第一个，放在独立的配置文件中（不建议牛屎马尿混在一起！）
8、是否将刚才的设置保存为预设：
? Save this as a preset for future projects? (y/N)
这个随便你，反正我之前保存过了。如果保存了，以后会在最开始的选择预设中出现你预设的这一项，省事。
然后就耐心等待创建代码并自动安装默认的依赖。根据你的网速决定时间，我通常是一两分钟完成。完成后会显示如下提示：
🎉 Successfully created project dscloudy-admin-single.
👉 Get started with the following commands:
$ cd dscloudy-admin-single
$ npm run serve
2.2 配置 WebStorm
WebStorm 需要提前安装好 Vue的插件（Vue.js）。使用 WebStorm 打开上面的工程: File - Open...，选择 dscloudy-admin-single, 打开工程。 然后打开设置 Preferences，进行如下设置：
1、设置文件编码： Editor-File Encodings`
设置编码
2、由于会出现 '@/xxxx' 之类的代码（@代替 src 路径），为了便于开发过程中的代码提示，需要配置 webpack 的配置文件路径：Languages & Frameworks - JavaScript - Webpack，选择 webpack 配置文件的路径：
{dscloudy-admin-single所在的路径}/node_modules/@vue/cli-service/webpack.config.js
webpack配置
3、开启 ESLint 代码检查：Languages & Frameworks - JavaScript - Code Quality Tools - ESLint
ESLint设置
4、其他的颜色、字体等根据个人喜好配置
在命令行中进入工程，执行 npm run serve, 测试工程是否可以正常运行
启动成功示意
浏览器中访问： http://localhost:8080
运行示意图
如果可以正常运行，便可以停止运行该工程（ctrl + c）。因为每次运行都在命令行中 npm run serve 是在是太无趣，在 WebStorm 中点击个按钮就完成的事，干嘛每次都要敲键盘。
2.3 调整目录
作为一个优雅实战，肯定要优化和完善 src 代码的目录结构，方便快速定位代码。我的目录结构如下（src同级的目录和文件忽略，使用默认的即可。关注点在源码目录 src 下）：
dscloudy-admin-single
|- public/
|- src/
|- assets/
|- img/ 存放类似背景图片之类的图片资源
|- scss/ 存放样式文件
|- axios/ 封装 axios
|- common/ 存放通用的 JS 工具类等
|- components/ 存放自己封装的组件库
|- config/ 存放配置文件
|- i18n/ 存放国际化文件
|- icons/ 存放 SVG 图标
|- mock/ 存放 mock 模拟数据
|- modules/ 存放各个模块，包括核心模块和各个业务 module
|- core/ 存放核心模块，每个module的目录结构都与 core 一样
|- demo/ 存放demo演示模块
|- router/ 存放通用路由和路由配置
|- store/ 存放全局状态管理
|- views/ 存放基础抽象视图
|- App.vue
|- main.js
注意，这里说明一下，我是按照模块化方式进行开发。 modules/ 之外的其他目录，都是项目全局的文件，modules 中存放的是一个个模块。这些模块包括：
- 支撑工程运行的核心（core）模块
- 很多项目都需要使用的系统管理（system）模块（这里还没有创建）
- 给开发人员提供案例的演示（demo）模块
- 各个业务模块（如：会员管理模块、商品管理模块、运营管理模块、报表管理模块、订单管理模块等）
核心模块 core 与 系统管理模块 system，是支撑这套前后端基础开发平台必备的模块。每个模块的结构都一样，后面会将这些业务模块拆分成一个个独立的前端工程（微前端），核心模块与系统管理模块放在基座工程中。
每个module的目录结构都是：
|- {module name}
|- api/ 存放该模块的网络请求
|- components/ 存放该模块使用的特殊组件
|- mock/ 存放该模块使用的模拟数据
|- pages/ 存放该模块的页面
|- router/ 存放该模块的路由
|- store/ 存放该模块的状态管理
|- index.js 该模块的入口文件
工程目录结构
2.4 运行工程
在 WebStorm 中配置工程的快速启动。 点击右上角的 Add Configuration...:
image-20200823143739761
在弹窗的框中，点击左上角 " + "， 选择 " npm "：
image-20200823143939720
Name: 随意输入啥都行，建议别改了
package.json: 默认是项目中的package.json，也不要修改
Command: 默认 run，不需修改
Scripts：选择 serve
确定之后，在主界面右上角就有运行的按钮了：
启动工程按钮示意
如果只有一个运行项，默认选中 serve, 点击旁边的运行按钮，即可启动项目。以后每次开发测试，都点击这个按钮就行，多省事啊！（反正我是没有每次 敲 npm run serve 这种癖好）
如果需要停止运行，点击旁边的红色按钮就行。
停止运行按钮
（本来这篇还包括提交GitHub 与 Gitee， 但有些细节写得太多导致篇幅稍长，故一套代码同时提交 GitHub、Gitee，就独立一篇写吧）
欢迎关注我的个人公众号，留言可加我个人微信或交流问题
image-20200822145016247
网友评论