文章目录
- vue介绍
- 一、灵活易用
- 1.渐进式框架
- 2.简洁的语法
- 二、高效的响应式系统
- 1.数据驱动
- 2.响应式原理
- 三、强大的组件化开发
- 1.组件化思想
- 2.组件通信
- 四、丰富的生态系统
- 1.插件和库
- 2.社区支持
- 安装依赖
- 删除+新增文件夹
- components设置
- (1)home.vue
- (2)data.vue
- (3)zero.vue
- router
- 配置babel.config.js
- main.js
- 配置vite.config.js
- axios
- 配置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 vue@latest(npm create vit@latest)
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
<template>
<div>
<el-button type="primary">编辑</el-button>
<el-button type="primary">分享</el-button>
<el-button type="primary">设置</el-button>
<el-button type="primary">搜索</el-button>
<el-button type="primary">
上传<el-icon class="el-icon--right"><Upload /></el-icon>
</el-button>
</div>
</template>
<script setup name="home">
</script>
(2)data.vue
<template>
信息页显示信息成功！
</template>
<script setup name="data">
</script>
(3)zero.vue
<template>
<el-empty description="description" />
</template>
<script setup name="zero">
</script>
router
新增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.vue'
export 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.vue'
import 'element-plus/theme-chalk/index.css'
import ElemntPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import 'virtual:windi.css'
import axios from 'axios'
import router from './router'
const app = createApp(App)
const pinia=createPinia()
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
<template>
<RouterLink to='/home'><el-button type='primary' plain>主页</el-button></RouterLink>
<RouterLink to='/data'><el-button type='primary' plain>信息页</el-button></RouterLink>
<div>
<RouterView></RouterView>
</div>
</template>
<script setup name="App">
import { 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-mock
viteMockServe({
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 build
build: {
// 输出目录
outDir: 'dist',
// 是否生成源代码映射文件
sourcemap: true,
// 是否启用压缩
minify: true,
// 是否将构建后的文件格式化
terserOptions: {
format: {
comments: false
}
}
},
})
axios
配置axios.js
import axios from 'axios'
const service =axios.create({
baseURL:'/api'
})
export default service
修改vite.config.js
将target地址修改成请求的地址
配置api/manager.js
import axios from '@/axios'
export function login(username,password){
return axios.post('/admin/login',{
username,
password
})
}
/admin/login是http://ceshi13deishait.cn后边的地址
http://ceshi13deishait.cn//admin/login
