Vue企业级优雅实战-01-初始化工程

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