前端工程化 - 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,
  }
})