So erstellen Sie ein automatisches Website-Erstellungsprojekt in Vue (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich die Verwendung von Vue zum Erstellen eines automatischen Website-Erstellungsprojekts vorgestellt. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben.

Vorab geschrieben

Ich habe Jquery+Jquery-ui verwendet, um dieses Projekt durchzuführen. Zu diesem Zeitpunkt gab es noch keinen Designentwurf und keine Projektanforderungen wegen der Worte von BOSS: Damals so etwas zu machen... okay! Ich gebe zu, ich habe mich tatsächlich daran gewöhnt und es spielt keine Rolle mehr (es ist auch hilflos, hey)!!!

Nach einer gewissen Zeit habe ich eine Demo erstellt und BOSS war sehr zufrieden , also machte ich langsam weiter. Konzentrieren wir uns nur darauf. Aufgrund der Unvollkommenheit des Produkts gab es natürlich immer noch einige Probleme.

Aber es kann grundsätzlich alles, was bearbeitet werden kann, bearbeitet werden. Der Hintergrund der Komponente (einschließlich Hintergrundbilder), die Farbrahmen-Schattenrand-Auffüllungsbreite, die Höhenausrichtung (Schriftart und die interne Elemente der Komponente) Rand-Radius-Schriftart (Schriftgröße/Schriftfamilie) und andere Grundlagen können nach Belieben geändert werden, da dies möglicherweise nicht den Anforderungen des Unternehmens entspricht, und eine benutzerdefinierte Stilfunktion hinzugefügt wird Dies kann nur von Leuten verwendet werden, die das Frontend verstehen. Nein, es gibt keine andere Möglichkeit, mit Änderungen Schritt zu halten, daher ist es sicherer, dies zu tun. Weil jeder weiß, dass die Befriedigung und Änderung von Bedürfnissen immer vor vorgefertigten Bedürfnissen steht

Zusätzlich zu diesen grundlegenden Änderungen sind auch die einzigartigen veränderbaren Funktionen jeder Komponente grundsätzlich vollständig, wie z. B. Karussellbildänderungen, Funktionen wie Der Karussellmodus, die Steuerung des Karussells usw. werden hier nicht einzeln vorgestellt.

Später wird die Funktion [Bindungsänderung] hinzugefügt, da einige Elemente innerhalb der Komponente nicht geändert werden können Wenn die Funktion ausgewählt ist, wählen Sie in der Ansichtsoberfläche das Element aus, das geändert werden muss, und dann können Sie es ändern. Diese Funktion ist tatsächlich sehr interessant, weil sie in erstellt wurde Beeilen Sie sich, was beim Speichern gespeichert wurde, verachten Sie es nicht (schade 0,0), das war in meinem Herzen schon immer ein Witz. In letzter Zeit hat BOSS einige neue Ideen vorgelegt. Nachdem ich darüber nachgedacht hatte, beschloss ich, das Projekt neu zu erstellen

Da Vue reaktionsfähig ist und im Grunde reine Datenoperationen ist, haben wir uns entschieden, dieses Projekt mit Vue neu zu erstellen.

Entwicklungsvorbereitung

1. Verwenden Sie vue-cli, um die konfigurierten Dinge herunterzuladen.

2. Da der Drag-and-Drop-Vorgang zum Generieren von Komponenten erforderlich ist vuedraggable und sortablejs.

Installieren Sie vuedraggable sortablejs

npm install vuedraggable
npm install sortablejs

Im Projekt müssen wir nur vuedraggable einführen, und vuedraggable lädt und ruft die Methoden in sortablejs auf (Wenn Sie es wissen möchten, können Sie es selbst sehen);

3. Installieren Sie vuex, da es viele Dateninteraktionen erfordert und viele Komponenten einige öffentliche Daten erfordern und Vuex nicht zur Verwaltung verwenden es wird mehr unnötigen Ärger für die Entwicklung mit sich bringen;

Vuex installieren

npm install --save vuex

4 Da es keinen Designentwurf gibt, habe ich mutig die UI-Bibliothek eines Drittanbieters verwendet

offizielle Website-Adresse von element-ui

Elememt installieren

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

Axios-Installation, die später für die Interaktion mit Hintergrunddaten verwendet wird

Axios installieren

npm install --save axios

Das sind alle Vorbereitungen, schauen wir uns als nächstes die Projektumsetzung an;

Das Projekt beginnt

1. Konfiguration verschiedener Dateien

-> Konfiguration der Dateien in main.js

Es gibt Erklärungen in den Bildern, die verständlich sein sollten; > Konfiguration der Seitenleisten-Drag-Komponentendaten

Da die Datei zu lang ist, wurden einige Teile gelöscht. Dies dient nur als Referenz.

Es gibt ein Layoutproblem zwischen Komponenten, daher müssen Layoutkomponenten vorhanden sein, damit Komponenten in Layoutkomponenten platziert werden können, damit sie flexibler sind

-> vuexjs js-Konfiguration Management

Beschreibung:

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

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

2、项目开发开始

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

<template>
 <!--用的element-ui-->
 <el-container>
  <el-aside>
   <Draggable class="app-aside-drag" :options="dragOption">
    <p class="app-aside-list" 
     v-for="(dragList,index) in dragData" 
     :type="dragList.type" 
     :key="dragList.type">
     <p class="aside-item-body">
      <i class="aside-item-ele"></i>
      <span class="aside-item-ele">{{ list.title }}</span>
     </p>
    </p>
   </Draggable>
  <el-aside>
  <el-main class="app-main">
   <section class="app-phone">
    <p class="app-phone-header">
     <span class="phone-camera"></span>
     <span class="phone-ls"></span>
    </p>
    <!--页面view区 -->
    <Sort class="app-phone-body"></Sort>
    <p class="app-phone-footer">
     <button class="app-phone-menu">RS</button>
    </p>
   </section>
  </el-main>
  <el-aside class="app-right">
   <!--组件编辑区域-->
   <BaseEdit></BaseEdit>
  </el-aside>
 </el-container> 
</template>

<script>
import DragApi from "@/dragapi/dragapi.js";
import Draggable from "vuedraggable";
import Sort from "@/view/Sort";
import BaseEdit from "@/view/BaseEdit";

export default {
 name: &#39;app&#39;,
 data(){
  return{
   dragData: {},
   dragOption: {
    group: {
     name: &#39;components&#39;, //这个很重要，其他的与之能产生关联的拖拽框就靠这name 一定要一致
     pull: &#39;clone&#39;, 
     put: false
    },
    sort: false //默然为true。这里我们只需要他拖拽，无需能拖动排序
   }
  }
 },
 components: {
  Draggable,
  Sort,
  BaseEdit
 },
 created(){
  //侧边栏拖拽列表数据
  //这里我只写了组件的数据进来，布局的暂时没放
  this.dragData = DragApi.configList[1].content;
 }
}
</script>

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

<template>
 <Draggable :options="sortOption"
  @sort="onSort"
  @add="onAdd"
  class="app-sort">
  <!-- ui组件 -->
  <!--这里不懂的人，可以去vue官网看看动态组件-->
  <p v-for="(appUi,index) in sortApi" //循环组件
    :is="appUi.component" //根据存在的组件渲染出来
    :content="appUi.content"
    :oStyle="appUi.style"
    :editPartShow="appUi.editPartShow"
    :aIndex="index"
    //组件想要点击生效，只需要@click.native就行了
    @click.native="getIndex(index)"
    //key值一定要给出来，不然相同组件的排序可能会不成功
    :key="appUi.content.code">
  </p>
 </Draggable>
</template>
<script>
 //利用vuex 辅助函数来操作vuexjs中的数据
 import { mapState,mapMutations } from &#39;vuex&#39;;
 //拖拽插件引入
 import Draggable from &#39;vuedraggable&#39;;
 //各个组件引入
 import Carousel from "@/components/Carousel.vue";
 import Btn from "@/components/Btn.vue";

 export default {
  name: &#39;Sort&#39;,
  components: {
   Draggable,Btn,Carousel
  },
  data(){
   return {
    sortOption: {
     group: {
      name: &#39;components&#39;, //前面说的name,在这里就起了作用，不一样，是不能放入的
      pull: true,
      put: true
     },
     sort: true,
     animation: 300 //给了个动画，看起来舒服些
    }
   }
  },
  computed:{
   ...mapState([&#39;editIndex&#39;,&#39;sortApi&#39;]),
  },
  watch:{
   sortApi:{
    handler(newVal,oldVal){
     window.sessionStorage.setItem(&#39;localData&#39;,JSON.stringify(newVal));
    },
    deep: true
   }
  },
  methods:{
   ...mapMutations([&#39;sortCp&#39;,&#39;addCp&#39;,&#39;setStyle&#39;,&#39;setCommon&#39;]),
   onSort(res){ //排序产生的事件
    if(res.from === res.to){
     this.sortCp(res);
    }
   },
   onAdd(res){//组件增加产生的事件
    this.addCp(res);
   },
   getIndex(index){
    this.setCommon({index: index,flag: true});
   }
  }
 }
</script>

-> 再来看看编辑组件

<template>
 <transition name="slide-right">
  <p v-if="sortApi.length > 0 && editShow === true">
   //组件特有编辑
   <el-tabs v-model="activeName">
    <el-tab-pane label="组件设置" name="first">
     <p v-for="(appUi,index) in sortApi"
       :is="appUi.component+&#39;Edit&#39;"
       :content="appUi.content"
       :oStyle="appUi.style"
       :editPartShow="appUi.editPartShow"
       :aIndex="index"
       :currentIndex="editIndex"
       :key="appUi.content.code">
     </p>
    </el-tab-pane>
    <el-tab-pane label="样式设置" name="second">
     //公共样式编辑
     <el-collapse v-model="colorPicker.name" class="base-edit" accordion>
      <el-collapse-item class="tititt" :title="colorPicker.type" :name="colorPicker.type">
       <el-form ref="form" :model="colorPicker" size="mini">
        <el-form-item class="cui-inline-reset"
         v-for="(item,index) in colorPicker.content"
         :label="item.title"
         :key="item.style">
         <el-color-picker
          //在element-ui框架中，有很多@change @active-change事件，直接写事件发现不能传入参数，
          //当然，办法总比问题多，我们换成一下这种写法就行了，他的默然参数写在前面
          //这里颜色拾取器 返回的是实时的颜色值
          //我这里主要想传一个对应的style
          @active-change=" (value) => setStyle(value,item.style)"
          v-model="sortApi[editIndex].style[item.style]"
          show-alpha>
         </el-color-picker>
         <span class="black-text-shadow"
          :style="{color: sortApi[editIndex].style[item.style]}">
          {{ sortApi[editIndex].style[item.style] }}
         </span>
        </el-form-item>
       </el-form>
      </el-collapse-item>
     </el-collapse>
    </el-tab-pane>
   </el-tabs>
  </p>
 </transition>
</template>
<script>
 import { mapState,mapMutations } from &#39;vuex&#39;;
 //这里我将组建特有的编辑栏，写成了一个组件，为什么不写在相应的组件一起了？
 //这里必须说明一下，主要是我没有想到方法，让他在同一组件内分离出来，单独将dom结构放在编辑栏这里，如果有大神知道
 //还望不吝赐教
 import BtnEdit from "@/components/BtnEdit.vue";
 
 export default{
  name: &#39;BaseEdit&#39;,
  components: {
   BtnEdit
  },
  data(){
   return{
    colorPicker: {
     type: &#39;颜色设置&#39;,
     name: &#39;Picker&#39;,
     content:[
      {
       title: &#39;背景颜色&#39;,
       style: &#39;background&#39;
      },
      {
       title: &#39;字体颜色&#39;,
       style: &#39;color&#39;
      }
     ]
     
    },
    activeName: &#39;first&#39;
   }
  },
  
  computed:{
   ...mapState([&#39;editIndex&#39;,&#39;sortApi&#39;,&#39;editShow&#39;])
  },
  methods:{
   setStyle(value,style){
    //根据上面传入的style属性，实时改变现有的值
    this.$set(this.sortApi[this.editIndex].style,style,value);
   }
  }
 }
</script>

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

//按钮组件，其实里面很简单
//组件的对应的编辑组件，里面内容和这个也差不多，下面就不写了
<template>
 <p class="btn-box ui-sortable" :data-code="content.code">
  <el-button class="ui-btn"
   :style="oStyle">
   {{ content.text }}
  </el-button>
  //因为每个组件都有删除功能，所以写成了一个组件
  <DeleteCp :aIndex="aIndex"></DeleteCp>
 </p>
</template>
<script>
 import DeleteCp from "@/components/DeleteCp";
 export default {
  name: &#39;Btn&#39;,
  props: { //父组件传入的参数
   content: Object,
   oStyle: Object,
   aIndex: Number
  },
  components: {
   DeleteCp
  },
  data(){
   return{
    btnModel: &#39;btn-model&#39;
   }
  }
 }
</script>

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

<template>
 <p class="delete-compontent-box">
  <p class="el-icon-delete remove-component" @click.stop="dailogStatu"></p>
  <el-dialog
   title="提示"
   :visible.sync="dialogVisible"
   :append-to-body="appendToBody"
   width="430px">
   <p class="el-message-box__content">
    <p class="el-message-box__status el-icon-warning"></p>
    <p class="el-message-box__message dialog-message">此操作将删除该模块, 是否继续?</p>
   </p>
   <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false" size="small">取 消</el-button>
    <el-button type="primary" @click="onRemove(aIndex)" size="small">确 定</el-button>
   </span>
  </el-dialog>
 </p>
</template>

<script>
 import { mapMutations } from "vuex";
 export default {
  name: &#39;oText&#39;,
  props: {
   aIndex: Number
  },
  data(){
   return{
    //这两个参数是弹框的参数
    dialogVisible: false,
    appendToBody: true 
   }
  },
  methods:{
   ...mapMutations([&#39;deleteCp&#39;,&#39;setCommon&#39;]),
   dailogStatu(){
   //主要是控制弹窗出来，并且显示该组件对应的编辑栏
    this.dialogVisible = true;
    this.setCommon({flag: true,index: this.aIndex})
   },
   onRemove(index){
    //点击确定删除对应的组件
    let flag = false;
    this.deleteCp(index);
    this.dialogVisible = false;
    this.$message({
     message: &#39;该模块已删除 !&#39;,
     type: &#39;success&#39;
    });
    this.setCommon({flag: false,index: 0})
   }
  }
 }
</script>

-> 来看看效果图吧

效果图展示

结束语

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

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

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

相关文章：

使用selenium抓取淘宝数据信息

使用npm安装Electron失败的问题

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

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein automatisches Website-Erstellungsprojekt in Vue (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!