网站建设公司厂,wordpress头像缓存到本地,使用vue做商城网站项目难点,中药材天地网做中药零售网站目录
1. Vue简介
2. Element Plus简介
3. Axios简介
4. 创建Vue项目
4.1 Node.js安装
4.2 创建Vue项目
4.3 Vue项目的结构
4.4 安装Element-Plus
4.5 安装Axios
4.6 解决跨域问题
5. 应用实例
5.1 创建Vue组件
5.2 配置路由
5.3 配置根组件
5.4 启动前端应用服…目录
1. Vue简介
2. Element Plus简介
3. Axios简介
4. 创建Vue项目
4.1 Node.js安装
4.2 创建Vue项目
4.3 Vue项目的结构
4.4 安装Element-Plus
4.5 安装Axios
4.6 解决跨域问题
5. 应用实例
5.1 创建Vue组件
5.2 配置路由
5.3 配置根组件
5.4 启动前端应用服务器 1. Vue简介 Vue.js通常简称为Vue是一个用于构建用户界面的渐进式JavaScript框架。它旨在提高前端开发的效率让代码组织更加模块化和可维护。Vue.js由尤雨溪在2014年创建并且在开源社区中拥有广泛的支持和使用。 Vue的主要特性如下
渐进式架构Vue可以仅作为一个简单的视图层库使用也可以通过生态系统中的其他库和工具扩展为一个功能完备的框架比如Vue Router路由管理、Vuex状态管理等。组件化Vue将界面分解成独立的组件每个组件对应一个特定的功能或视图部分。组件之间可以嵌套和重用提升了开发效率和代码的可维护性。数据驱动Vue使用声明式渲染开发者只需专注于数据的状态而不必手动更新DOM。当数据发生变化时Vue会自动高效地更新视图。双向数据绑定通过v-model指令Vue支持表单元素与应用状态之间的双向绑定这使得开发表单和处理用户输入变得更加简单和直观。单文件组件Vue推崇将HTML、JavaScript和CSS整合在一个.vue文件中使得开发者可以在一个文件里编写模板、逻辑和样式。单文件组件可以被打包工具比如WebpackVite处理以实现高度的可维护性和模块化开发。虚拟DOMVue采用虚拟DOM技术通过对数据的重新渲染只更新必要的部分从而增强性能。
2. Element Plus简介 Element Plus是一款基于Vue.js 3.0的UI组件库是对Element UI的重写和升级版本。它提供了一套现代化、易用的UI组件用于快速构建Web应用程序。Element Plus拥有丰富的组件库覆盖了常见的UI组件和功能包括表单、表格、对话框、按钮等能够帮助开发者快速搭建界面提升开发效率。 Element Plus 的主要特性如下
基于 Vue 3完全基于Vue 3开发与 Vue 3 生态完全兼容性能优异。丰富的组件库包含了从基础表单控件到高级数据展示组件等多种组件满足各类业务场景需求。主题定制支持自定义主题开发者可以根据需求对样式进行个性化配置。国际化支持内置国际化支持可以轻松应用到多语言项目中。高性能基于 Vue 3的Composition API和其它新特性拥有优秀的性能表现。TypeScript 支持默认支持TypeScript有助于提高代码的可靠性和可维护性。开发文档完善Element Plus由Element UI团队维护和支持开发者可以通过官方文档、GitHub 仓库等途径获取技术支持和更新。活跃社区支持Element Plus拥有活跃的社区开发者可以在社区中提问、分享经验和获取帮助。
3. Axios简介 Axios 是一个基于Promise的HTTP客户端主要用于浏览器和Node.js中发送HTTP请求。它提供了简单、方便且强大的 API使得与服务器进行通信变得非常容易。通过Axios可以发送 GET、POST、PUT、DELETE 等各种类型的HTTP请求处理响应数据以及进行错误处理。 Axios的主要特性如下
基于 PromiseAxios 是基于原生的 JavaScript Promise API支持链式调用便于处理异步操作。支持浏览器和 Node.js不仅可以在浏览器中使用也适用于Node.js环境。拦截请求和响应 Axios 提供了请求和响应的拦截器功能可以在发送请求或收到响应时进行处理,如添加认证信息、统一错误处理等。支持请求和响应数据转换Axios 会自动将请求数据转换为JSON 格式同时也会将响应数据从 JSON 转换为JavaScript 对象。支持取消请求通过创建一个取消令牌可以取消正在进行的请求。跨站点请求支持保护跨站点请求伪造 (CSRF)。客户端支持防御 XSRF客户端可以通过设置一个 xsrfCookieName 值来作为 xsrfToken 使用,并附带在请求中。
4. 创建Vue项目 创建Vue项目前确保你的机器上已经安装了Node.js。Node.js 是一个基于 Chrome V8 JavaScript 引擎的开源、跨平台的 JavaScript 运行时环境它允许开发者使用 JavaScript 在服务器端编写应用程序扩展了 JavaScript 的应用范围。
4.1 Node.js安装 Node.js的官方网址https://node.js.org/en/download/ 如下图所示当前版本是20.12.2点击“Download Node.js v20.12.2”下载Node.js。 下载完毕后双击安装包开始安装Node.js。 安装完毕后进入控制台输入如下命令 node -v 如果显示Node.js版本则说明Node.js安装成功。 4.2 创建Vue项目 进入创建Vue项目的目录这里以E:\vue为例在命令行中运行如下命令 npm init vuelatest 这一指令将会安装并执行 create-vue它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示如果不确定是否要开启某个功能可以直接按下回车键选择 No其过程如下。 此时在目录E:\vue\mysaasweb中创建了Vue项目项目的名称为“mysaasweb”。根据提示在命令行中运行如下命令启动Web服务器。 npm run dev
输出结果如下 在浏览器中输入http://localhost:5173如果显示如下界面则说明创建Vue项目成功。 4.3 Vue项目的结构 目前前端开发工具有很多例如Webstorm、HBuilder、Visual Studio CodeVScode、Nodepad等在这里我们使用VScode来开发Vue项目。利用VScode开发所创建的Vue项目的目录E:\vue\mysaasweb如下图所示。 Vue项目的目录和文件的含义如下
目录/文件含义node_modules项目依赖包的存放目录public存放静态资源文件的目录如网站的图标src存放项目的源代码 assets存放静态资源文件如图片、演示文件等 components存放项目中的Vue组件 router存放路由相关的配置文件如index.js store存放Vuex状态管理的相关配置文件如counter.js views存放页面级别的Vue组件App.vue根组件整个应用的入口main.js程序的入口脚本文件创建并挂载Vue实例.gitinoreGit忽略文件用于指定哪些文件或目录不应该被Git版本控制index.html应用程序的入口HTML文件jsconfig.json配置JavaScript项目的相关选项package-lock.json记录项目依赖树的精确版本package.json项目的说明文件包含名称、版本等信息README.md项目的说明文档vite.config.jsVue CLI 配置文件可以在此配置项目相关的选项
4.4 安装Element-Plus 进入Vue项目的安装目录E:\vue\mysaasweb在命令行中运行如下命令 npm install element-plus --save 如果安装成功在package.json文件的dependencies中出现element-plus及其版本号如下图所示element-plus的当前版本号为2.7.4。 接下来在Vue项目中引入element-plus。
打开main.js文件如图所示。 修改main.js在项目中引入element-plus。 删除样式main.cssmain.js的代码如下
import { createApp } from vue
import { createPinia } from piniaimport App from ./App.vue
import router from ./router//引入element-plus
import ElementPlus from element-plus
import element-plus/dist/index.css const app createApp(App)app.use(createPinia())
app.use(router)
app.use(ElementPlus) //使用element-plusapp.mount(#app) 4.5 安装Axios 进入Vue项目的安装目录E:\vue\mysaasweb在命令行中运行如下命令 npm install axios 如果axios安装成功在package.json文件的dependencies中出现axios及其版本号如下图所示axios的当前版本号为1.7.2。
metho
Axios提供了一套灵活的API可以传递相关的配置来创建请求定义如下
axios(config)
常用的配置选项如下
url用于请求的服务器URL。method创建请求时使用的方法。baseURL请求的基地址若URL配置的不是绝对地址这个基地址将会附加到URL上。headers自定义请求配置头。params与请求一起发送的URL参数。data作为请求体被发送的数据仅适用于PUT、POST、DELETE和PATCH请求方法。timeout设置请求的超时时间单位为毫秒。withCredentials设置跨域请求时是否需要使用凭证。responseType设置浏览器将要响应的数据类型。
4.6 解决跨域问题 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。 同源策略会阻止一个域的Javascript脚本和另外一个域的内容进行交互。所谓同源即指在同一个域就是两个页面具有相同的协议protocol主机host和端口号port。 在Vue项目中可以在vite.config.js文件中增加后端服务器的配置信息来解决跨越问题。 server:{ host:127.0.0.1, //前端vue项目的IP地址 port:5173, //前端vue项目的端口号 open:true, //表示在启动开发服务器时会自动打开浏览器并访问指定的地址 proxy:{ /mysaasapp:{ //后端springboot项目的名称 target:http://127.0.0.1:8080,//后端springboot项目地址 changeOrigin: true, //是否跨域 ws: true, //是否代理websockets pathRewrite:{ ^/mysaasapp: //假如我们的地址是 /mysaasapp/login 会转化为 /login } } }
修改后的文件vite.config.js内容如下
import { fileURLToPath, URL } from node:urlimport { defineConfig } from vite
import vue from vitejs/plugin-vue// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),],resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url))}},server: {host: 127.0.0.1, //前端vue项目的IP地址port: 5173, //前端vue项目的端口号open: true, //表示在启动开发服务器时会自动打开浏览器并访问指定的地址proxy: {/mysaasapp: {target: http://127.0.0.1:8080,//后端springboot项目地址changeOrigin: true, //是否跨域ws: true, //是否代理websocketspathRewrite: {^/mysaasapp: //假如我们的地址是 /mysaasapp/login 会转化为 /login}}}}
})5. 应用实例 本节以一个简单的登录功能为例介绍Vue组件的开发过程。在/src/components目录下创建两个Vue组件Login.vue和Mainframe.vue其中Login.vue为登录组件Mainframe.vue为登录成功后跳转的首页面。在这里我们主要实现Login.vueMainframe.vue的具体实现省略只显示“这是主页面”。
5.1 创建Vue组件 在/src/components目录下创建登录组件Login.vue代码如下
templatediv classlogin clearfixdiv classlogin-wrapel-row typeflex justifycenterel-form reflognForm :modeluser status-icon label-width80pxh3登录/h3hrel-form-item propusername label用户名el-input v-modeluser.username placeholder请输入用户名 prefix-icon/el-input/el-form-itemel-form-item idpassword proppassword label密码el-input v-modeluser.password show-password placeholder请输入密码 prefix-icon/el-input/el-form-itemdiv classrouterlinkrouter-link to/找回密码/router-link/divel-form-itemel-button typeprimary clickdoLogin()登录/el-button/el-form-item/el-form/el-row/div/div
/template
script langts
import axios from axios;
export default {name: login,data() {return {user: {username: ,password: }};},created() { },methods: {doLogin() {if (!this.user.username) {this.$message.error(请输入用户名);return;} else if (!this.user.password) {this.$message.error(请输入密码);return;} else {axios({method: post,url: /mysaasapp/login,data: this.user,headers: {Cache-Control: no-cache}}).then(response {if (response.data.message 1) {this.$router.replace({ path: /mainframe });} else {alert(用户名或密码输入有误);}}).catch(resp {alert(登录失败!);});}}}
}
/script
style scope
.login {width: 100%;height: 740px;background: url(../assets/background.jpg) no-repeat;background-size: cover;overflow: hidden;
}.login-wrap {background: url(../assets/white.jpg) no-repeat;background-size: cover;width: 400px;height: 300px;margin: 215px auto;overflow: hidden;padding-top: 10px;line-height: 40px;
}#password {margin-bottom: 5px;
}h3 {color: #0babeab8;font-size: 24px;text-align: center;
}hr {background-color: #444;margin: 20px auto;
}a {text-decoration: none;color: #aaa;font-size: 15px;
}a:hover {color: coral;
}.routerlink {text-align: center;
}.el-button {width: 80%;justify-content: center;}
/style在/src/components目录下创建主页面组件Mainframe.vue代码如下
templatediv classmainframeh1这是主页面/h1/div/templatestylemedia (min-width: 1024px) {.mainframe {min-height: 100vh;display: flex;align-items: center;}}/style 5.2 配置路由 进入src/router目录打开路由配置文件index.js首先引入Login.vue和Mainframe.vue代码如下 import Login from ../components/Login.vue import Mainframe from /components/Mainframe.vue 然后在routes[ ] 下面配置Login.vue和Mainframe.vue的路由代码如下 { path: /login, name: login, component:Login },{ path: /mainframe, name: mainframe, component:Mainframe }
对于创建Vue项目时自动生成组件如果不需要可以从index.js中删除删除后的index.js内容如下 import { createRouter, createWebHistory } from vue-router
import Login from ../components/Login.vue
import Mainframe from ../components/Mainframe.vueconst router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: /login,name: login,component:Login},{path: /mainframe,name: mainframe,component:Mainframe}]
})
export default router 5.3 配置根组件 打开Vue项目的根组件App.vue引入Login.vue和Mainframe.vue删除创建Vue项目时自动生成的信息代码如下
script setup
import { RouterLink, RouterView } from vue-router
import Login from ./components/Login.vue
import Mainframe from ./components/Mainframe.vue
/scripttemplaterouter-view/router-view
/template
5.4 启动前端应用服务器 打开VScode的终端在命令行中运行如下命令 npm run dev 在浏览器地址栏中输入http://localhost:5173/login显示如下登录页面 目前还没有后端的API服务因此当用户的点击“登录”按钮后会显示登录失败的信息。 关于基于Springboot的API服务开发在后面的文章中讲解。
登录项目的两个背景图片如下 background.jpg white.jpg
