目录
前言：
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架，它允许开发者逐步采用其功能。它的核心是一个响应式的视图层，能够高效地更新 DOM 并保持数据同步。
vue的优点
在现有的项目中引入Vue.js是很有必要的因为vue是轻量级框架，它只关注视图层，是一个构建数据的视图集合。
vue是双向数据绑定的，它保留了angular的特点，在数据操作方面更为简单。
vue也是更加组件化的，其数据保留react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势。
视图，数据，结构分离，这使得数据变得更为简单，不需要进行逻辑代码修改，只需要操作数据就可以完成相关操作。
vue的运行速度更快，相比较react而言，操作虚拟dom，在性能上vue存在很大的优势。
在传统的HTML、CSS和JavaScript项目中逐步引入Vue.js，可以通过以下方式实现无缝集成。vue的设计允许渐进式采用，无需重写现有代码。
一、在现有项目中引入Vue.js方式
1.通过CDN直接引入Vue
对于小型项目或快速原型开发，最简单的方式是通过CDN引入Vue。在HTML文件的<head>或<body>底部添加Vue的CDN链接
html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 或使用生产环境版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
2.创建Vue实例
在现有JavaScript代码中初始化Vue实例，指定挂载的DOM元素：
javascript
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
对应的HTML中需要有一个容器元素：
html
<div id="app">
{{ message }}
</div>
3.渐进式集成策略
从局部功能开始使用Vue，逐步扩大使用范围。可以在现有页面中为特定区域创建Vue实例，而非整个页面：
html
<div id="legacy-content">
<!-- 传统HTML/CSS/JS内容 -->
</div>
<div id="vue-section">
{{ vueData }}
</div>
javascript
new Vue({
el: '#vue-section',
data: {
vueData: 'This is Vue-controlled content'
}
});
4.组件化迁移
将重复的UI部分转换为Vue组件，逐步替换传统代码：
javascript
Vue.component('custom-button', {
template: '<button @click="handleClick">{{ text }}</button>',
props: ['text'],
methods: {
handleClick() {
alert('Button clicked!');
}
}
});
在HTML中使用该组件：
html
<custom-button text="Click me"></custom-button>
5.构建工具集成
对于复杂项目，考虑使用Vue CLI或webpack构建工具：
bash
npm install -g @vue/cli
vue create my-project
6.路由集成
添加vue-router处理导航，同时保留传统页面的部分路由逻辑：
javascript
const router = new VueRouter({
routes: [
{ path: '/vue-page', component: VuePageComponent },
{ path: '/legacy-page', beforeEnter() { window.location.href = '/legacy.html' }}
]
});
二、实例
以下是我在开发报表系统时进行的vue添加，我才用的是第一种方式的vue添加，即通过CDN直接引入vue。
首先，创建vue的主应用app.js
javascript
// app.js
const { createApp, ref, onMounted, computed } = Vue;
const app = createApp({
setup() {
// 用户状态
const isLoggedIn = ref(false);
const currentUser = ref(null);中间代码省略
javascript
return {
isLoggedIn,
currentUser,
activeSection,
pageTitle,
showModal,
login,
logout,
switchSection,
showHelp,
hideHelp
};
}
});
app.mount('#app');其次，在登录页面login.html上创建vue
javascript
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, ref } = Vue;
const app = createApp({
setup() {
const loginForm = ref({
username: '',
password: ''
});
const loginError = ref(false);
const handleLogin = () => {
// 检查用户名和密码
if (loginForm.value.username === 'admin' &&
loginForm.value.password === '123456') {
// 登录成功
localStorage.setItem('isLoggedIn', 'true');
window.location.href = 'index.html';
} else {
// 登录失败
loginError.value = true;
setTimeout(() => {
loginError.value = false;
}, 3000);
}
};
return {
loginForm,
loginError,
handleLogin
};
}
});
app.mount('#app');
</script>然后，在主页面index.html上创建vue
javascript
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, ref, onMounted, computed } = Vue;
const app = createApp({
setup() {
// 用户状态
const isLoggedIn = ref(false);
const currentUser = ref(null);
return {
isLoggedIn,
currentUser,
activeSection,
pageTitle,
showModal,
login,
logout,
switchSection,
showHelp,
hideHelp
};
}
});
app.mount('#app');
</script>最后，在styles.css上添加vue控制的显示/隐藏类
css
/* 添加 Vue 控制的显示/隐藏类 */
.modal.hidden {
display: none;
}
.modal.visible {
display: block;
}成果如同
具体内容还需详细展示，有任何疑问可以私信。