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

679 阅读7分钟

1 环境准备

1.1 安装 Node JS

在官网下载 Node JS 最新稳定版进行安装,安装完成后分别输入命令 node -vnpm -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