1-vue+elementUI+sprintboot-项目前的准备
vueelementUIsprintboot
vue+elementUI+sprintboot 所需软件 版本检测 安装 idea jdk 1.8 mysql 5.7+ navicat node.js 14.16.0 postman redis java -version 检查jdk版本，即java的版本 node -v 检查node的版本 vue -V 检查vue的版本 安装vue的版本为4.5.14版本的命令 npm install -g @vue/cli@4.5.14 安装node.js的版本为14.16.0版本 地址 https://nodejs.org/dist/v14.16.0/ 创建vue项目 1.先进入一个目录，如d:/myvuep 2.创建一个vue项目 vue create myfirstvue 命令 1.选择 Manually select features 2.选择babel,router,不要linter那个 3.选择2.x 空格键 可以选择和取消选择 只包含这两个，是一个最简单的架构 4.输入Y 5.选择In package.json 6.输入N 7.开始自动创建 辅助 由于npm是国外的，我们可以使用命令来设置一个淘宝镜像，可以通过淘宝镜像安装， 速度比较快 设置淘宝镜像命令 npm config set registry=https://registry.npm.taobao.org 这是一个全局的设置 项目结构 public src favicon.ico index.html 一个图标 一个静态文件 router views App.vue main.js assets logo.png 一个logo图片 index.js 路由的设置 写代码的页面，就放在views中 一个入口 一个全局的设置 package.json 前端依赖的配置文件，进行前端依赖的配置和展示配置信息 项目启动 node_modules 自动安装的vue的依赖，都在这个目录下 cd myfirstvue 进入新建的myfirstvue项目目录 npm run serve 启动vue项目 访问网址 如 ： - Local: http://localhost:8080/ - Network: http://192.168.0.104:8080/ 安装element组件 小试牛刀 修改views中Home.vue内容 修改前 <template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'Home', components: { HelloWorld } } </script> 修改 1.添加msg数据 data(){ return{ msg:"hello 小哥哥" } } 2.添加显示msg元素 <h1>{{msg}}</h1> 修改后 <template> <div class="home"> <h1>{{msg}}</h1> <img alt="Vue logo" src="../assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'Home', components: { HelloWorld }, data(){ return{ msg:"hello 小哥哥" } } } </script> 安装 网址 https://element.eleme.cn/2.15/#/zh-CN/component/installation 安装命令 npm i element-ui -S cd myfirstvue npm i element-ui -S 进入vue项目路径 安装element 辅助 按ctrl+c,可以关闭控制台之前运行的命令 安装完成后 可以在package.json中的dependencies下看到安装的element-ui的版本 "dependencies": { "core-js": "^3.6.5", "element-ui": "^2.15.8", "vue": "^2.6.11", "vue-router": "^3.2.0" }, 引入element-ui import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); Subtopic 在main.js中引入element-ui 引入前 import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app') 引入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI, {size:"small"}); {size:"small"}，可以让控件大小小点，适应你的电脑，不加的画，控件会比较大 引入后 import Vue from 'vue' import App from './App.vue' import router from './router' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.config.productionTip = false Vue.use(ElementUI, {size:"small"}); new Vue({ router, render: h => h(App) }).$mount('#app') 在Home.vue中添加一个el-button元素，验证是不是生效 添加 <el-button>测试el</el-button> 添加后 <template> <div class="home"> <h1>{{msg}}</h1> <el-button>测试el</el-button> <img alt="Vue logo" src="../assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'Home', components: { HelloWorld }, data(){ return{ msg:"hello 小哥哥" } } } </script> <el-button type="danger">测试el</el-button> 带有红色样式的按钮
posted on 2022-06-03 14:05  大话人生  阅读(33)  评论(0)  编辑  收藏  举报
Powered by:
博客园
Copyright © 2024 大话人生
Powered by .NET 9.0 on Kubernetes