网站开发 功能不会写,长沙企业模板建站,网站开发流程简述,网站运营推广该如何做文章目录 1.项目基本介绍2.安装Node.js#xff08;SSM部分安装过#xff09;3.初始化前端工程1.创建一个文件夹 springboot_vue2.创建vue项目1.在刚才创建的文件夹下打开命令行#xff0c;使用脚手架搭建项目2.选择手动配置3.选择三个4.选择vue35.选择路由模式6.选择包管理方… 文章目录 1.项目基本介绍2.安装Node.jsSSM部分安装过3.初始化前端工程1.创建一个文件夹 springboot_vue2.创建vue项目1.在刚才创建的文件夹下打开命令行使用脚手架搭建项目2.选择手动配置3.选择三个4.选择vue35.选择路由模式6.选择包管理方式7.保留这次设置8.为这次设置命名9.配置成功10.启动项目 4.使用IDEA打开项目1.退出项目2.拖动刚才创建的项目到IDEA3.Vue基本执行流程4.配置使用npm方式启动5.启动项目6.配置启动项目自动打开首页7.配置默认浏览器 5.安装Element-Plus1.官方文档2.指南-安装3.进行安装IDEA命令行或者项目目录下打开cmd都可以 6.配置Vue的服务端口防止端口冲突1.vue.config.js下配置2.配置启动端口代码3.启动端口变成9999 7.修改默认项目配置1.App.vue2.HomeView.vue3.删除HelloWorld.vue组件 8.项目基本界面1.src/components/Header.vue 编写组件2.src/App.vue 主页面引入组件3.src/assets/css/global.css 创建全局样式css4.src/main.js 引入全局样式5.src/main.js 引入Element-Plus6.src/App.vue 引入一个Element-Plus组件测试7.src/components/Header.vue 设置Header的下拉框8.src/components/Aside.vue 编写侧边栏组件9.src/App.vue 将页面分为三个部分并引入侧边栏组件10.src/views/HomeView.vue 引入表格组件11.src/main.js 国际化12.src/views/HomeView.vue 表格排序13.src/views/HomeView.vue 为表格添加固定列14.src/views/HomeView.vue 添加搜索框和按钮15.小结 1.项目基本介绍 2.安装Node.jsSSM部分安装过 3.初始化前端工程
1.创建一个文件夹 springboot_vue 2.创建vue项目
1.在刚才创建的文件夹下打开命令行使用脚手架搭建项目 这里如果提示 ‘vue’ 不是内部或外部命令也不是可运行的程序就是没有安装脚手架还是有问题就是没有安装node.js 2.选择手动配置 3.选择三个 4.选择vue3 5.选择路由模式 6.选择包管理方式 7.保留这次设置 8.为这次设置命名 9.配置成功 10.启动项目 4.使用IDEA打开项目
1.退出项目 2.拖动刚才创建的项目到IDEA 3.Vue基本执行流程 4.配置使用npm方式启动 5.启动项目 6.配置启动项目自动打开首页 7.配置默认浏览器 5.安装Element-Plus
1.官方文档
Element-Plus官方文档
2.指南-安装 3.进行安装IDEA命令行或者项目目录下打开cmd都可以 6.配置Vue的服务端口防止端口冲突
1.vue.config.js下配置 2.配置启动端口代码
// 配置启动端口
module.exports {devServer: {port: 9999}
}3.启动端口变成9999 7.修改默认项目配置
1.App.vue templatediv/div
/templatestyle/style
2.HomeView.vue templatediv/div
/templatescript
// import HelloWorld from /components/HelloWorld.vueexport default {name: HomeView,components: {// HelloWorld}
}
/script
3.删除HelloWorld.vue组件 8.项目基本界面
1.src/components/Header.vue 编写组件
templatediv styleheight: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display: flexdiv stylewidth: 200px; padding-left: 30px; font-weight: bold; color: dodgerblue后台管理/divdiv styleflex: 1/divdiv stylewidth: 100px下拉框/div/div/template
script
export default {name: Header
}
/script
style/style2.src/App.vue 主页面引入组件
templatedivHeader/Header/div
/templatestyle/stylescriptimport Header from /components/Header.vue;export default {name: Layout,components: {Header}}
/script3.src/assets/css/global.css 创建全局样式css
* {margin: 0;padding: 0;box-sizing: border-box;
}4.src/main.js 引入全局样式 5.src/main.js 引入Element-Plus import { createApp } from vue
import App from ./App.vue
import router from ./router
import store from ./store
// 引入全局css
import /assets/css/global.css
// 引入element-plus
import ElementPlus from element-plus
// 引入element-plus相关样式
import element-plus/dist/index.css// 使用组件
createApp(App).use(store).use(router).use(ElementPlus).mount(#app)
6.src/App.vue 引入一个Element-Plus组件测试 7.src/components/Header.vue 设置Header的下拉框
templatediv styleheight: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display: flexdiv stylewidth: 200px; padding-left: 30px; font-weight: bold; color: dodgerblue后台管理/divdiv styleflex: 1/divdiv stylewidth: 100pxel-dropdownspan classel-dropdown-linktomel-icon classel-icon--rightarrow-down//el-icon/spantemplate #dropdownel-dropdown-menuel-dropdown-item个人信息/el-dropdown-itemel-dropdown-item退出登录/el-dropdown-item/el-dropdown-menu/template/el-dropdown/div/div/template
script
export default {name: Header
}
/script
style/style8.src/components/Aside.vue 编写侧边栏组件
scriptexport default {name: Aside}
/scripttemplate!-- 引入导航菜单--divel-menu stylewidth: 200pxdefault-active2classel-menu-vertical-demoel-menu-item index1el-iconicon-menu //el-iconspan导航一/span/el-menu-itemel-menu-item index2el-iconicon-menu //el-iconspan导航二/span/el-menu-itemel-menu-item index3 disabledel-icondocument //el-iconspan导航三/span/el-menu-itemel-menu-item index4el-iconsetting //el-iconspan导航四/span/el-menu-item/el-menu /div
/templatestyle/style9.src/App.vue 将页面分为三个部分并引入侧边栏组件
templatediv!-- 头部--Header/Header!-- 主体弹性布局--div styledisplay: flex!-- 侧边栏--Aside/!-- 路由弹性布局--router-view styleflex: 1//div/div
/templatestyle/stylescript
import Header from /components/Header.vue;
import Aside from /components/Aside.vue;export default {name: Layout,components: {Aside,Header}
}
/script10.src/views/HomeView.vue 引入表格组件
templatedivel-table :datatableData stripe stylewidth: 100%!-- 把width去掉就会自适应--el-table-column propdate label日期/el-table-column propname label名字/el-table-column propaddress label地址 //el-table/div
/templatescriptexport default {name: HomeView,components: {},//增加一个data单项绑定tableDatadata() {return {tableData: [{date: 2016-05-03,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-02,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-04,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-01,name: Tom,address: No. 189, Grove St, Los Angeles,},]}}
}
/script 11.src/main.js 国际化 12.src/views/HomeView.vue 表格排序 13.src/views/HomeView.vue 为表格添加固定列 !--在表格的最后一列加入两个超链接--el-table-column fixedright label操作 width100template #defaultscope!-- 插槽机制点击编辑会将本行的信息传到handleEdit中--el-button clickhandleEdit(scope.row) typetext编辑/el-buttonel-button typetext删除/el-button/template/el-table-column方法池编写一个空方法 methods: {handleEdit() {alert(11)}}14.src/views/HomeView.vue 添加搜索框和按钮 !--增加按钮和搜索框--!--magrin代表上下边距为10px左右边距为5px--div stylemargin: 10px 5pxel-button typeprimary新增/el-buttonel-button其他/el-button/div!--再增加一个搜索框并设置边距--div stylemargin: 10px 5px!--搜索框双向绑定一个search--el-input v-modelsearch stylewidth: 30% placeholder请输入关键字/el-button typeprimary查找/el-button/div数据池双向绑定搜索框 15.小结
