1、使用Vue CLI工具生成脚手架，这是最常见的使用方式，简单用模板生成一个HelloWorld Demo，可以学习Vue的SPA项目结构
2、通过script引入Vue.js，详细如下：这里搭配Mint-ui
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
</head>
<body>
<div id="app">
<mt-button @click.native="handleClick">按钮</mt-button>
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
<script>
new Vue({
el: ‘#app‘,
methods: {
handleClick: function() {
this.$toast(‘Hello world!‘)
}
}
})
</script>
</html>
那么，如何将SPA 转成传统多页面应用？
1、加头加尾，DOM的基本结构要有
2、script引入Vue.js等库，注意Vue放在第一位置引入
3、将xxx.vue文件template内所有 复制到新页面中，并用id为app的div包裹
4、有样式的，迁移到新页面头部的style中
5、在底部new一个Vue实例，并传入变量和方法，例如
<script>
var vm = new Vue({
el: ‘#app‘,
data: {
username: ‘‘,
password: ‘‘
},
methods: {
Login() {
console.log("登录成功", "用户名", this.username, "密码", this.password)
}
}
})
</script>
原文地址：https://www.cnblogs.com/ww01/p/9626799.html
时间： 2024-08-30 10:44:14