foreword
One day Zhang San said to Xiaohua, I need to implement a beautiful front-end page on a new computer: such as the homepage of Jingdong Mobile (m.jd.com).
At this time, Xiaohua went to the new computer to install nodejs and npm, and then used npm to build the vue3 project locally, and downloaded and installed element-plus and axios in the project. The next step is to enter the encoding stage. The written file is finally packaged as a dist file and placed in nginx to run.
A set of processes is time-consuming and labor-intensive. At this time, we should use a simpler method to build this single-page project: single-page html is directly imported into Vue3.
1. Single-page Vue architecture
1. Build an html project;
2. Create a single html page;
3. Introduce Vue3, Element-plus, Axios and other components in the head area; 4. Write front-end code in the <
div id="app"> area ;
2. Build html project
Create a new empty project through Idea, set the project name, project storage path
2. Create a single html page
2.1, create html directory
2.2, create html page
In the html directory, create an HTML file
2.3. Introduce Vue3, Element-plus, Axios and other components in the head area
Import Vue3, Element-plus, Axios and other components in the form of CDN files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单页面引入Vue3演示</title>
<!-- Import element-plus style -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- Import Vue 3 -->
<script src="//unpkg.com/vue@3"></script>
<!-- Import axios -->
<script src="//unpkg.com/axios/dist/axios.min.js"></script>
<!-- Import element-plus -->
<script src="//unpkg.com/element-plus"></script>
</head>
<body>
</body>
</html>
2.4. Write the front-end code in the <div id="app"> area
<div id="app">
<h2>{
{msg}}</h2>
</div>
2.5. Define data and methods in App and create VueApp
<script>
const App = {
data(){
return{
loading: false
}
},
mounted(){
},
methods:{
}
}
const App2 = Vue.createApp(App)
App2.use(ElementPlus)
App2.mount(app)
</script>
2.6. Define the data model in data
<script>
const App = {
data(){
return{
msg: "" ,
loading: false
}
},
mounted(){
},
methods:{
}
}
const App2 = Vue.createApp(App)
App2.use(ElementPlus)
App2.mount(app)
</script>
2.7. Write event interaction and business logic in methods
<script>
const App = {
data(){
return{
msg: "" ,
loading: false
}
},
mounted(){
init();
},
methods:{
init(){
this.msg = "hello,world!"
}
}
}
const App2 = Vue.createApp(App)
App2.use(ElementPlus)
App2.mount(app)
</script>
2.8. Check the effect
3. Build a carousel map on the home page
3.1. The html area uses the Carousel component of Element-plus
<div id="app">
<h2>{
{msg}}</h2>
<!-- 轮播图 -->
<div class="block">
<el-carousel :interval="4000" height="400px" >
<el-carousel-item v-for="item in carouseData" :key="item">
<div class="pic_item">
<img :src="item.picture" style="width: 100%;height: 400px;" alt=""/>
<span class="title">{
{item.title}}</span>
<span class="subTitle">{
{item.subTitle}}</span>
</div>
</el-carousel-item>
</el-carousel>
</div>
<!-- 轮播图END -->
</div>
3.2, script area
<script>
const App = {
data(){
return{
msg: "" ,
carouseData : [],
loading: false
}
},
created() {
//初始化数据
this.init();
//获取首页轮播图
this.getCarouseData("carouseData");
},
methods:{
init(){
this.msg = "hello,world!";
},
//获取首页轮播图
getCarouseData(val){
axios.get( "../static/mock/carouse/data.json" ).then((response) => {
this[val] = response.data.success.data;
});
}
}
}
const App2 = Vue.createApp(App)
App2.use(ElementPlus)
App2.mount(app)
</script>
3.3. Prepare image data
3.4. Carousel mock data data.json
{
"success" : {
"code" : 200 ,
"message" : "成功",
"data" :[
{
"picture": "../img/index/zlzx.png" , "title": "专注Web软件定制开发" , "subTitle": "平台软件+定制开发+多端互联" },
{
"picture": "../img/index/jkzhzx.png" , "title": "服务为本 客户至上" , "subTitle": "专业，敬业，周到"},
{
"picture": "../img/index/hysdp.png" , "title": "让技术驱动进步成长" , "subTitle": "以快捷，安全，自主，轻便技术能力为核心宗旨"},
{
"picture": "../img/index/cjkbdp.png" , "title": "让技术驱动进步成长" , "subTitle": "以快捷，安全，自主，轻便技术能力为核心宗旨"}
]
} ,
"fail" : {
"code" : 400 ,
"message" : "请求失败，请稍后再试！"
}
}
3.5, renderings
Summarize
By loading Vue3 on a single page, you can enjoy the convenient syntax of Vue3 without installing cumbersome tools such as node.js and npm. It is very convenient when developing 1-2 independent pages.