前端工程化的开发过程

Vscode 应用

项目中的前端工具： vscode、hbuilder、webstorm

插件

使用chrome浏览器

Google Chrome 网络浏览器

测试

前端工程化

Node.js

Node.js 是一个开源的、跨平台的 JavaScript 运行时环境。

下载

安装

·

npm配置

？？： 如果网络慢，考虑配置淘宝镜像，类似于maven阿里云镜像。

vue-cli

1. C:\Users\Administrator>npm install -g @vue/cli@4.5.15

1. D:\wnhz-web\wn-market>vue --version
2. @vue/cli 4.5.15

vue项目

vue create 项目名称(wn-market-web)

1. Vue CLI v4.5.15
2. ┌──────────────────────────────────────────┐
3. │ │
4. │ New version available 4.5.15 → 5.0.8 │
5. │ Run npm i -g @vue/cli to update! │
6. │ │
7. └──────────────────────────────────────────┘
9. ? Please pick a preset: (Use arrow keys)
10. > Default ([Vue 2] babel, eslint)
11. Default (Vue 3) ([Vue 3] babel, eslint)
12. Manually select features

1. "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
2. "build": "SET NODE_OPTIONS=--openssl-legacy-provider &&vue-cli-service build",

npm run serve

前端项目的基本构成

开发流程

自定义vue组件

在components文件夹下， 第一个字母大写.vue