Vue—前端工程化

Vue-cli

介绍:Vue-cli是Vue官方提供的一个脚手架，用于快速生成一个Vue的模板

Vue-cli提供了以下功能：

统一的目录结构

• 本地调试
• 热部署
• 单元测试
• 集成打包上线

依赖环境:NodeJs

需下载安装长期维护版本的NodeJs再以管理员身份允许命令提示符

全局模块存放路径 

num config prefix "NodeJs的文件路径"

切换npm淘宝资源镜像 方便后期资源下载 

首先，打开命令提示符或终端，执行以下命令将npm源切换为淘宝镜像：

npm config set registry https://registry.npmmirror.com//最新

执行完这个命令后，可以通过以下命令验证是否切换成功：

如果返回 https://registry.npmmirror.com，说明配置成功。

环境准备 

安装Vue.cli

npm install -g @vue/cli

安装成功

安装版本检查

vue --version

---

工程化Vue项目 

Vue项目-创建

命令行:

vue create vue - project01

图形化界面:

vue ui

创建项目后解决报错

解决方案参考: https://blog.csdn.net/qq_40047019/article/details/132663644

Vue项目-目录结构

基于Vue脚手架创建出来的工程，有标准的目录结构如下:

• node-modules 整个项目的依赖包
• pubilic             存放项目的静态文件        
• src                  存放项目的源代码
• package.json  模块的基本信息，项目开发所需的模块，版本信息
• vue.config.js    保存vue配置的文件，如:代理，端口的配置等

src

1. assets            静态资源
2. components  可重用的组件
3. router             路由配置
4. views             视图组件(页面)
5. App.vue         入口页面(根组件)
6. main.js           入口js文件

Vue项目启动

图形化界面下运行NPM脚本

Vue项目-配置端口​​​​

在vue.config.js文件下

---

Vue项目的开发流程 

首先通过入口文件 main.js 进入默认首页 Index.html

通过import 导入组件或模块 类似Java导包操作

App.vue

Vue的组件文件以.vue结尾，每个组件由三个部分组成:<template>,<script>,<style>