前端工程化的开发过程

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