万网没备案怎么做网站,wordpress issingular,博客园 wordpress.net,个人建设视频网站制作文章目录 vue介绍一、灵活易用1.渐进式框架2.简洁的语法 二、高效的响应式系统1.数据驱动2.响应式原理 三、强大的组件化开发1.组件化思想2.组件通信 四、丰富的生态系统1.插件和库2.社区支持 安装依赖删除新增文件夹components设置(1)home.vue(2)data.vue(3)zero.vue router配… 文章目录 vue介绍一、灵活易用1.渐进式框架2.简洁的语法 二、高效的响应式系统1.数据驱动2.响应式原理 三、强大的组件化开发1.组件化思想2.组件通信 四、丰富的生态系统1.插件和库2.社区支持 安装依赖删除新增文件夹components设置(1)home.vue(2)data.vue(3)zero.vue router配置babel.config.jsmain.js配置vite.config.jsaxios配置api/manager.js vue介绍 Vue.js通常简称 Vue是一个用于构建用户界面的渐进式 JavaScript 框架。它具有以下显著特点和优势
一、灵活易用
1.渐进式框架 Vue 可以根据项目的需求逐步引入你可以从简单的页面开始逐步增加功能和复杂度而不需要一次性采用整个框架。这使得 Vue 适用于各种规模的项目从小型的静态页面到大型的企业级应用。
2.简洁的语法 Vue 的模板语法简洁直观易于学习和使用。它使用类似于 HTML 的模板语言结合指令和表达式可以方便地将数据绑定到页面上并实现动态的交互效果。例如使用v-bind指令可以动态绑定属性v-if和v-for指令可以实现条件渲染和列表渲染。
二、高效的响应式系统
1.数据驱动 Vue 采用数据驱动的开发模式即视图是由数据自动渲染生成的。当数据发生变化时Vue 会自动更新相关的视图无需手动操作 DOM。这大大提高了开发效率减少了出错的可能性。
2.响应式原理 Vue 通过使用 ES5 的Object.defineProperty()方法或 ES6 的 Proxy 对象来实现数据的响应式。当数据被访问或修改时Vue 能够自动追踪依赖并在数据变化时通知相关的组件进行更新。
三、强大的组件化开发
1.组件化思想 Vue 鼓励使用组件化开发将页面拆分成一个个独立的、可复用的组件。每个组件都有自己的模板、逻辑和样式可以独立开发、测试和维护。这提高了代码的可维护性和可复用性使得大型项目的开发更加高效。
2.组件通信 Vue 提供了多种方式来实现组件之间的通信包括父子组件之间的 props 传递、自定义事件的触发和监听、通过 Vuex 进行全局状态管理等。这些通信方式使得组件之间的交互更加灵活和方便。
四、丰富的生态系统
1.插件和库 Vue 拥有庞大的生态系统有许多优秀的插件和库可以扩展其功能。例如Vue Router 用于实现路由管理Vuex 用于状态管理Element UI 和 Ant Design Vue 等 UI 框架提供了丰富的组件库可以快速构建美观的用户界面。
2.社区支持 Vue 拥有活跃的社区开发者可以在社区中获取帮助、分享经验和学习最新的技术。社区还提供了大量的教程、文档和示例代码方便开发者快速上手和解决问题。 总之Vue.js 以其灵活易用、高效的响应式系统、强大的组件化开发和丰富的生态系统成为了前端开发中非常受欢迎的框架之一。无论是小型项目还是大型企业级应用Vue 都能提供强大的支持帮助开发者构建出高质量的用户界面。 本章对于vue的语法不进行介绍只介绍如何通过vue进行项目创建的前期工作。
安装依赖
npm init vuelatest(npm create vitlatest)npm install
npm install vue-router -s
npm install axios -s
npm install pinia
npm install element-plus --save
npm install element-plus/icons-vue
npm i -D vite-plugin-windicss windicss
npm install babel-plugin-component
npm install mockjs
npm install vite-plugin-mock
npm i universal-cookie^6
npm install vueuse/integrations删除新增文件夹
删除src内的文件 在src文件夹下新增components、stores、api、router文件夹 新增axios.js:
components设置
(1)home.vue
templatedivel-button typeprimary编辑/el-buttonel-button typeprimary分享/el-buttonel-button typeprimary设置/el-buttonel-button typeprimary搜索/el-buttonel-button typeprimary上传el-icon classel-icon--rightUpload //el-icon/el-button/div
/templatescript setup namehome/script(2)data.vue
template信息页显示信息成功
/templatescript setup namedata/script(3)zero.vue
templateel-empty descriptiondescription /
/template
script setup namezero
/scriptrouter
新增index.js:
import {createRouter,createWebHashHistory} from vue-router
import home from ../components/home.vue
import data from ../components/data.vue
import zero from ../components/zero.vueexport default new createRouter({routes:[{path:/home, name:home,component:home,},{path:/data, name:data,component:data,},{path:/zero, name:zero,component:zero,}],history:createWebHashHistory(),
})配置babel.config.js
module.exports{presets:[vue/cli-plugin-babel/preset],plugins:[[components,{libraryName:element-plus,styleLibraryName:theme-chalk}]]
}main.js
import { createApp } from vue
import {createPinia} from pinia
import App from ./App.vueimport element-plus/theme-chalk/index.css
import ElemntPlus from element-plus
import * as ElementPlusIconsVue from element-plus/icons-vue;
import virtual:windi.cssimport axios from axios
import router from ./routerconst app createApp(App)
const piniacreatePinia()
app.use(pinia)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}
app.use(ElemntPlus)
app.config.globalProperties.$axios axios
app.use(router)
app.mount(#app)App.vue
templateRouterLink to/homeel-button typeprimary plain主页/el-button/RouterLinkRouterLink to/datael-button typeprimary plain信息页/el-button/RouterLinkdivRouterView/RouterView/div
/templatescript setup nameAppimport { RouterLink, RouterView } from vue-router;
/script配置vite.config.js
import { fileURLToPath, URL } from node:url
import { defineConfig } from vite;
import vue from vitejs/plugin-vue;
import { viteMockServe } from vite-plugin-mock;
import WindiCSS from vite-plugin-windicss// https://vitejs.dev/config/
export default defineConfig({// 项目根目录root: ./,// 插件配置plugins: [// Vue插件
vue(),
WindiCSS(),// Mock插件// ——cnpm install mockjs、cnpm install vite-plugin-mockviteMockServe({mockPath: mock,injectCode: import { setupMock } from ./mock/mock;setupMock();})],// 别名配置resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url))}},// 服务器配置server:{//自动启动浏览器open:true, // 服务器端口号// ——http://localhost:5173/ 改成http://localhost:3000/port: 3000,// 代理配置proxy: {/api: {target: http://localhost:8080,changeOrigin: true,rewrite: (path) path.replace(/^\/api/, )}}},// 构建配置// ——npm run buildbuild: {// 输出目录outDir: dist,// 是否生成源代码映射文件sourcemap: true,// 是否启用压缩minify: true,// 是否将构建后的文件格式化terserOptions: {format: {comments: false}}},
})axios
配置axios.js
import axios from axiosconst service axios.create({baseURL:/api
})export default service修改vite.config.js 将target地址修改成请求的地址
配置api/manager.js
import axios from /axiosexport function login(username,password){return axios.post(/admin/login,{username,password})
}/admin/login是http://ceshi13deishait.cn后边的地址 http://ceshi13deishait.cn//admin/login
