如何建立自己的微网站,搜索引擎优化应注意什么,高端网站建设文案,推广网页的策划案文章目录 SSM--搭建Vue 前端工程--项目基础界面实现功能01-搭建Vue 前端工程需求分析/图解代码实现搭建Vue 前端工程下载node.js LTS 并安装: node.js 的npm创建Vue 项目使用idea 打开ssm_vue 项目, 并配置项目启动 Vue3 项目目录结构梳理Vue3 项目结构介绍 配置Vue 服务端口El… 文章目录 SSM--搭建Vue 前端工程--项目基础界面实现功能01-搭建Vue 前端工程需求分析/图解代码实现搭建Vue 前端工程下载node.js LTS 并安装: node.js 的npm创建Vue 项目使用idea 打开ssm_vue 项目, 并配置项目启动 Vue3 项目目录结构梳理Vue3 项目结构介绍 配置Vue 服务端口Element Plus 和Element UIElement UI 官方文档其它说明 安装element-plus 插件 SSM–搭建Vue 前端工程–项目基础界面
实现功能01-搭建Vue 前端工程
需求分析/图解
1、使用Vue3 的脚手架Vue-cli 工具, 创建ssm 的前端项目基础开发环境 2、Vue-cli 主要的功能是自动生成Vue 的项目模板, 提高开发效率
代码实现
搭建Vue 前端工程
下载node.js LTS 并安装: node.js 的npm
用于管理前端项目包依赖,安装14.17.3 这个版本, 方便我们使用vue3,node 的版本一致最好. 否则可能出现一些不兼容情况.
1node.js 安装非常简单直接下一步即可
2验证node.js 是否安装成功 3全局安装Vue 插件cli : npm install -g vue/cli , 这样我们就可以创建Vue 工程 创建Vue 项目
说明因为我们是前后端分离所以需要新建一个前端项目
1创建文件夹d:\SSM-Vue 整合项目 2创建Vue 项目ssm_vue , 我创建在d:\SSM-Vue 整合项目目录下 指令vue create ssm_vue 3选择你需要的插件
注意选择要按空格键进行选中按回车无法选中会跳到下一步 4选择路由模式 5选择项目依赖包管理方式 6选择是否保存本次设置 7回车开始创建项目成功会提示如下界面 8启动项目-按给出指令执行即可 9启动项目成功 会提示如下界面 10完成测试浏览器访问 使用idea 打开ssm_vue 项目, 并配置项目启动
直接将ssm_vue 项目拖到idea 配置ssm_vue 使用npm 方式启动 Vue3 项目目录结构梳理
Vue3 项目结构介绍
梳理Vue3 最重要的路由机制理解后就清晰很多 index.html 页面说明 assets 目录和components 目录说明 router/index.js 用于配置路由 store/index.js 用于存放数据 视图使用的基本介绍 package.json 说明前端项目包依赖关系类似maven 的pom.xml main.js 用于引入资源(css/组件等), 同时也是创建App 挂载#app, 引入./router ./store等资源的所在 配置Vue 服务端口
因为我们是前后端分离 tomato需要8080这里我们就更改VUE的端口了。
1 、修改ssm_vue\vue.config.js
const {defineConfig} require(vue/cli-service)
module.exports defineConfig({transpileDependencies: true
})
module.exports {devServer:{port:10000 // 启动端口}
}2.启动测试, 可以看到现在是10000 端口了
Element Plus 和Element UI
Element UI 官方文档
Element UI 官方文档https://element.eleme.cn/#/zh-CN
Element Plus 官方文档https://element-plus.gitee.io/zh-CN/ 一句话 Element PlusElement UI for Vue 3.0
其它说明
1、Element Plus 是Element 对Vue 3.0 的升级适配 2、Element 诞生于2016 年起初是饿了么内部的业务组件库开源后深受广大前端开发者的喜爱成为Vue 生态中最流行的UI 组件库之一。 3、Element Plus 是重构的全新项目。Element 团队重写了Element 的代码用于支持Vue3 4、Element UI 还在维护和升级因为Vue2 仍然有项目在使用, Vue3 支持的浏览器范围有所减少, 这是一个大的改变, 所以在一段时间内, Vue2 仍然会在项目使用.
安装element-plus 插件
我们会使用到element-plus 停止项目安装element-plus 插件, element-plus 官方文档 https://element-plus.gitee.io/#/zh-CN/component/layout
