前端工程化 - Vue
环境准备
Vue-cli是Vue官方提供的一个脚手架，用户快速生成一个Vue的项目模板。
Vue-cli提供了如下功能：
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
需要安装Node.js
安装Vue-cli
npm install -g @vue/cli
通过vue --version指令查看是否安装成功。
Vue项目创建
命令行方式：
vue create vue-project-name
图形化界面方式：
vue ui
图形化方式步骤：
简单设置后，点击Next。
选择手动，之后点击Next。
其他配置默认即可，但是一定要选择Router（路由功能）。
选择Vue版本和语法解析方式。
最后，进行项目创建。
Vue项目的目录结构
基于Vue脚手架创建出来的工程，有标准的目录结构，如下：
| 文件/目录 | 用途 |
|---|---|
| node_modules | 整个项目的依赖包 |
| public | 存放项目的静态文件 |
| src | 存放项目的源代码 |
| package.json | 模块基本信息，项目开发所需要模块、版本信息 |
| vue.config.js | 保存vue配置的文件，如：代理、端口的配置等 |
src目录下内容：
| 文件/目录 | 用途 |
|---|---|
| assets | 静态资源 |
| components | 可重用的组件 |
| router | 路由配置 |
| views | 视图组件（页面） |
| App.vue | 入口页面（根组件） |
| main.js | 入口js文件 |
Vue项目启动
图形化方式：vscode下的npm脚本中的serve。
命令行：
npm run serve
Vue项目配置端口号
在vue.config.js中添加：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,devServer: {port:7070,}
})