How to create an automatic website building project in vue (detailed tutorial)

This article mainly introduces how to use vue to build an automatic website building project. Now I will share it with you and give you a reference.

Written before

I have been using Jquery Jquery-ui for this project before. At that time, there was no design draft and no project requirements. Just because of BOSS’s words, it was necessary To make something like this, it was just...okay! I admit, I’m actually used to it, and it doesn’t matter anymore (it’s also helpless, hey)!!!

After a period of time, I made a demo, and BOSS was very satisfied, so I continued slowly Let's do it, for about two or three months, just focus on this. Later, the project was launched. Of course, because of the imperfection of the product, there were still some problems!

But it can basically meet the needs of the company. Everything that can be edited can be edited. The background of the component (including background images) color border box-shadow margin padding width height alignment (font and internal elements of the component) border- Radius font (font-size/font-family) and other basics can be changed at will. Of course, considering that it may not meet the needs of the company, a custom style function is added, and this can only be used by people who understand the front-end. No, there is no other way. Demand will never keep up with changes, so it is safer to do so. Because everyone knows that the satisfaction and change of needs always precede ready-made needs

In addition to these basic changes, the unique changeable functions of each component are also basically complete, such as carousel image changes, The functions of carousel mode, controlling whether to carousel, etc. will not be introduced one by one here

Including later, because some elements within the component cannot be modified, the [Binding Modification] function was added, which is this After the function is selected, in the view interface, select the element that needs to be modified, and then you can modify it. This function is quite interesting

Having said so much, in fact, because it was done in a hurry, what was saved during storage was HTML, please don’t despise it (shame 0.0). This has always been a joke in my heart. Recently, BOSS has put forward some new ideas. There are a lot of things to add. After thinking about it, I decided to restructure the project

Considering that vue is responsive and basically pure data operations, we decided to rebuild this project using vue.

Development preparation

1. Use vue-cli to download the configured things
2. Because the drag and drop operation of generating components is involved, so Used vuedraggable and sortablejs.

Install vuedraggable sortablejs

npm install vuedraggable
npm install sortablejs

In the project, we only need to introduce vuedraggable. When sortablejs is involved, vuedraggable will load and call the methods in sortablejs. This is not ours. Things that need attention (if you want to know, you can go and see for yourself);

3. Install vuex, because it involves a lot of data interaction, and many components require some public data, so you don’t need to use vuex to manage it. , will bring more unnecessary trouble to development;

Install vuex

npm install --save vuex

4. Because there is no design draft, I boldly used the third-party UI library element-ui;

element-ui official website address

Install elememt

npm install element-ui
//为什么是element-ui而不是element?因为当时npm上已经有了element包了(我当时还觉得挺有意思的，0.0 好冷啊！！！)

5. Axios installation, which will be used later to interact with background data

Install axios

npm install --save axios

That’s all the preparation work, let’s look at the project implementation next;

Start of the project

1. Configuration of various files

-> Configuration of files in main.js

There are explanations in the pictures, you should be able to understand them;

-> Configuration of sidebar drag component data

Because the file is too long, some parts have been deleted. Here is a simple format for reference only. Not as a standard;

There is a layout problem among components, so there must be layout components so that the components can be placed in the layout assembly, so that it is more flexible

-> vuexjs js configuration in state management

Description:

1、因为用户在拖拽之后要实时保存到sessionStorage中， 所以再初始的时候要到sessionStroage中去取数据，防止突然刷新页面，还没有保存到数据库中，用户刚刚编辑的数据全部丢失的情况;
2、这里说明一下，可能考虑到用于已经提交了数据，所以用户关闭窗口之后，再次进来的时候，要结合后台给出的用户之前的数据，一起存储到sessionStorage中去，相信这一点大家肯定想的到的，这里善意提醒一下 0.0；
3、我这这里暂时放了四个参数，图中都有说明，我主要是将基本编辑做成了一个组件，会根据用户点击时哪个组件，而重新渲染数据给到编辑组件，从而可以实时对应到点击的组件去编辑；
4、editShow的作用就是控制编辑组件显示与否的，主要删除组件的时候，让编辑组件隐藏一下；点击其他组件的显示一下；

基本的配置就这些了，接下来就是真正的开发了;

2、项目开发开始

-> app.vue文件中该怎么写？

-> 来看看sort view视图区域组件

-> 再来看看编辑组件

-> 选出一个组件来看看里面是怎么配置的

//按钮组件，其实里面很简单
//组件的对应的编辑组件，里面内容和这个也差不多，下面就不写了

->最后来看看删除组件吧

-> 来看看效果图吧

效果图展示

结束语

好了，今天写了很多了，最后我们来梳理一下思路：

1、首先配置左侧的拖拽组件
2、配置vuex中的数据
3、app.vue中配置
4、编辑组件的配置
5、各种数据的传递与依赖

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用selenium抓取淘宝数据信息

使用npm安装Electron失败的问题

微信小程序使用Promise如何实现回调？

The above is the detailed content of How to create an automatic website building project in vue (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!