Vue项目搭建示例

搭建 Vue 前端工程

下载安装nodejs

image-20220726100802002

全局安装 Vue 插件 cli

npm install -g @vue/cli

创建 Vue 项目

image-20220726101128011

image-20220726101234069

选择你需要的插件

image-20220726101341089

image-20220726101410059

选择路由模式

image-20220726101511041

选择项目依赖包管理方式

image-20220726101648255

选择是否保存本次设置（以后可以当模板用）

image-20220726101707506

回车开始创建项目，成功会提示如下界面

image-20220726101825260

启动项目-按给出指令执行即可（下面两个蓝色的指令）

启动项目成功， 会提示如下界面

image-20220726101911300

完成测试，浏览器访问

image-20220726101950642

使用IDEA打开Vue项目

配置 ssm_vue 使用 npm 方式启动

image-20220726102155969

image-20220726102328088

image-20220726102353802

image-20220726102410915

配置 Vue 服务端口

修改 vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

module.exports = { 
  devServer:{ 
    port:10000 // 启动端口
 } 
}

image-20220726104001478

安装 ElementPlus

Element Plus 官方文档：https://element-plus.gitee.io/zh-CN/

npm install element-plus --save

image-20220726104235908