当前位置：Gxlcms > JavaScript > vue如何制作自动建站项目（详细教程）

vue如何制作自动建站项目（详细教程）

时间：2021-07-01 10:21:17 帮助过：26人阅读

这篇文章主要介绍了使用vue如何构建一个自动建站项目，现在分享给大家，也给大家做个参考。

写在前面

之前一直用Jquery+Jquery-ui来做这个项目，那个时候没有设计稿，没有项目需求，就因为BOSS一句话，要做这样的东西，当时就...好吧！我承认，其实已经习惯了，无所谓了(也是无奈，哎)!!!

在之后的一段时间里，做了一个demo出来，BOSS很满意了，所以自己接下来就慢慢做吧，差不多两三个月吧，就闷头做这个，后来项目上线了，当然因为产品的不完善，还是有点问题了！

不过基本能满足公司的需求了，能编辑的都可以编辑，组件的background(包括背景图片) color border box-shadow margin padding width height 对齐方式(字体和组件内部元素) border-radius font(font-size/font-family)等等这些基础的都可以随心变更，当然考虑到可能满足不了公司的使用，就加了一个自定义样式的功能，而这个只有懂前端的人才能使用了，没办法，需求永远赶不上变化，这样保险一点。因为大家都知道，需求的满足和变更永远跑在现成需求的前面

除了这些基础的可更改，各个组件的特有可变更的功能也基本齐全的，比如轮播图图片变更，轮播方式，控制是否轮播等等这些功能，这里就不一一介绍了

包括后来，因为有组件内部个别元素不能修改，又增加了[绑定修改]功能，就是这个功能选中之后，在视图界面，选中需要修改的元素，便可以进行修改了，这个功能还是有点意思的

说了这么多，其实当时因为做的仓促，存储的时候存的是HTML,大家不要鄙视(要脸0.0),这个也是我心里一直的梗，最近加上BOSS重新提出了一些想法，有蛮多东西要加，思前想后,决定将项目重构一下

考虑到vue响应式与基本是纯数据操作，所以决定使用vue重新构建这个项目。

开发准备

1、使用vue-cli，下载下来配置好的东西
2、因为中间牵涉了拖拽生成组件的操作，所以使用了vuedraggable和sortablejs。

安装vuedraggable sortablejs

  1. npm install vuedraggable
  2. npm install sortablejs

项目中我们只需要引入vuedraggable就可以了，牵涉了sortablejs东西的时候，vuedraggable会去自己加载调用sortablejs里面的方法的，这个就不是我们需要关注的(你如果想了解，可以自己去看看)；

3、安装vuex，因为里面牵涉到了大量的数据交互，很多组件都需要一些公用的数据，不使用vuex去管理，将会为开发带来更多不必要的麻烦;

安装vuex

  1. npm install --save vuex

4、因为没有设计稿的缘故，所以大胆使用了第三方UI库 element-ui;

element-ui官网地址

安装elememt

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

5、axios安装,后面与后台数据交互会用到

安装axios

  1. npm install --save axios

差不多准备工作就这些了，接下来我们看项目实施；

项目开始

1、各种文件的配置

-> main.js中文件的配置

图片中都有解释，应该可以看的懂的；

-> 侧边栏拖拽组件数据的配置

因为文件太长，所以删掉了一些，这里就是一个简单的格式，仅供参考，不作为标准；

在组件当中，存在一个布局的问题，所以要有布局组件，让组件可以放到布局组建中，这样才更加的灵活

-> vuexjs 状态管理中的js配置

说明：

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

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

2、项目开发开始

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

  1. <template>
  2.  <!--用的element-ui-->
  3.  <el-container>
  4.   <el-aside>
  5.    <Draggable class="app-aside-drag" :options="dragOption">
  6.     <p class="app-aside-list" 
  7.      v-for="(dragList,index) in dragData" 
  8.      :type="dragList.type" 
  9.      :key="dragList.type">
  10.      <p class="aside-item-body">
  11.       <i class="aside-item-ele"></i>
  12.       <span class="aside-item-ele">{{ list.title }}</span>
  13.      </p>
  14.     </p>
  15.    </Draggable>
  16.   <el-aside>
  17.   <el-main class="app-main">
  18.    <section class="app-phone">
  19.     <p class="app-phone-header">
  20.      <span class="phone-camera"></span>
  21.      <span class="phone-ls"></span>
  22.     </p>
  23.     <!--页面view区 -->
  24.     <Sort class="app-phone-body"></Sort>
  25.     <p class="app-phone-footer">
  26.      <button class="app-phone-menu">RS</button>
  27.     </p>
  28.    </section>
  29.   </el-main>
  30.   <el-aside class="app-right">
  31.    <!--组件编辑区域-->
  32.    <BaseEdit></BaseEdit>
  33.   </el-aside>
  34.  </el-container> 
  35. </template>
  36. <script>
  37. import DragApi from "@/dragapi/dragapi.js";
  38. import Draggable from "vuedraggable";
  39. import Sort from "@/view/Sort";
  40. import BaseEdit from "@/view/BaseEdit";
  41. export default {
  42.  name: 'app',
  43.  data(){
  44.   return{
  45.    dragData: {},
  46.    dragOption: {
  47.     group: {
  48.      name: 'components', //这个很重要，其他的与之能产生关联的拖拽框就靠这name 一定要一致
  49.      pull: 'clone', 
  50.      put: false
  51.     },
  52.     sort: false //默然为true。这里我们只需要他拖拽，无需能拖动排序
  53.    }
  54.   }
  55.  },
  56.  components: {
  57.   Draggable,
  58.   Sort,
  59.   BaseEdit
  60.  },
  61.  created(){
  62.   //侧边栏拖拽列表数据
  63.   //这里我只写了组件的数据进来，布局的暂时没放
  64.   this.dragData = DragApi.configList[1].content;
  65.  }
  66. }
  67. </script>

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

  1. <template>
  2.  <Draggable :options="sortOption"
  3.   @sort="onSort"
  4.   @add="onAdd"
  5.   class="app-sort">
  6.   <!-- ui组件 -->
  7.   <!--这里不懂的人，可以去vue官网看看动态组件-->
  8.   <p v-for="(appUi,index) in sortApi" //循环组件
  9.     :is="appUi.component" //根据存在的组件渲染出来
  10.     :content="appUi.content"
  11.     :oStyle="appUi.style"
  12.     :editPartShow="appUi.editPartShow"
  13.     :aIndex="index"
  14.     //组件想要点击生效，只需要@click.native就行了
  15.     @click.native="getIndex(index)"
  16.     //key值一定要给出来，不然相同组件的排序可能会不成功
  17.     :key="appUi.content.code">
  18.   </p>
  19.  </Draggable>
  20. </template>
  21. <script>
  22.  //利用vuex 辅助函数来操作vuexjs中的数据
  23.  import { mapState,mapMutations } from 'vuex';
  24.  //拖拽插件引入
  25.  import Draggable from 'vuedraggable';
  26.  //各个组件引入
  27.  import Carousel from "@/components/Carousel.vue";
  28.  import Btn from "@/components/Btn.vue";
  29.  export default {
  30.   name: 'Sort',
  31.   components: {
  32.    Draggable,Btn,Carousel
  33.   },
  34.   data(){
  35.    return {
  36.     sortOption: {
  37.      group: {
  38.       name: 'components', //前面说的name,在这里就起了作用，不一样，是不能放入的
  39.       pull: true,
  40.       put: true
  41.      },
  42.      sort: true,
  43.      animation: 300 //给了个动画，看起来舒服些
  44.     }
  45.    }
  46.   },
  47.   computed:{
  48.    ...mapState(['editIndex','sortApi']),
  49.   },
  50.   watch:{
  51.    sortApi:{
  52.     handler(newVal,oldVal){
  53.      window.sessionStorage.setItem('localData',JSON.stringify(newVal));
  54.     },
  55.     deep: true
  56.    }
  57.   },
  58.   methods:{
  59.    ...mapMutations(['sortCp','addCp','setStyle','setCommon']),
  60.    onSort(res){ //排序产生的事件
  61.     if(res.from === res.to){
  62.      this.sortCp(res);
  63.     }
  64.    },
  65.    onAdd(res){//组件增加产生的事件
  66.     this.addCp(res);
  67.    },
  68.    getIndex(index){
  69.     this.setCommon({index: index,flag: true});
  70.    }
  71.   }
  72.  }
  73. </script>

-> 再来看看编辑组件

  1. <template>
  2.  <transition name="slide-right">
  3.   <p v-if="sortApi.length > 0 && editShow === true">
  4.    //组件特有编辑
  5.    <el-tabs v-model="activeName">
  6.     <el-tab-pane label="组件设置" name="first">
  7.      <p v-for="(appUi,index) in sortApi"
  8.        :is="appUi.component+'Edit'"
  9.        :content="appUi.content"
  10.        :oStyle="appUi.style"
  11.        :editPartShow="appUi.editPartShow"
  12.        :aIndex="index"
  13.        :currentIndex="editIndex"
  14.        :key="appUi.content.code">
  15.      </p>
  16.     </el-tab-pane>
  17.     <el-tab-pane label="样式设置" name="second">
  18.      //公共样式编辑
  19.      <el-collapse v-model="colorPicker.name" class="base-edit" accordion>
  20.       <el-collapse-item class="tititt" :title="colorPicker.type" :name="colorPicker.type">
  21.        <el-form ref="form" :model="colorPicker" size="mini">
  22.         <el-form-item class="cui-inline-reset"
  23.          v-for="(item,index) in colorPicker.content"
  24.          :label="item.title"
  25.          :key="item.style">
  26.          <el-color-picker
  27.           //在element-ui框架中，有很多@change @active-change事件，直接写事件发现不能传入参数，
  28.           //当然，办法总比问题多，我们换成一下这种写法就行了，他的默然参数写在前面
  29.           //这里颜色拾取器 返回的是实时的颜色值
  30.           //我这里主要想传一个对应的style
  31.           @active-change=" (value) => setStyle(value,item.style)"
  32.           v-model="sortApi[editIndex].style[item.style]"
  33.           show-alpha>
  34.          </el-color-picker>
  35.          <span class="black-text-shadow"
  36.           :style="{color: sortApi[editIndex].style[item.style]}">
  37.           {{ sortApi[editIndex].style[item.style] }}
  38.          </span>
  39.         </el-form-item>
  40.        </el-form>
  41.       </el-collapse-item>
  42.      </el-collapse>
  43.     </el-tab-pane>
  44.    </el-tabs>
  45.   </p>
  46.  </transition>
  47. </template>
  48. <script>
  49.  import { mapState,mapMutations } from 'vuex';
  50.  //这里我将组建特有的编辑栏，写成了一个组件，为什么不写在相应的组件一起了？
  51.  //这里必须说明一下，主要是我没有想到方法，让他在同一组件内分离出来，单独将dom结构放在编辑栏这里，如果有大神知道
  52.  //还望不吝赐教
  53.  import BtnEdit from "@/components/BtnEdit.vue";
  54.  
  55.  export default{
  56.   name: 'BaseEdit',
  57.   components: {
  58.    BtnEdit
  59.   },
  60.   data(){
  61.    return{
  62.     colorPicker: {
  63.      type: '颜色设置',
  64.      name: 'Picker',
  65.      content:[
  66.       {
  67.        title: '背景颜色',
  68.        style: 'background'
  69.       },
  70.       {
  71.        title: '字体颜色',
  72.        style: 'color'
  73.       }
  74.      ]
  75.      
  76.     },
  77.     activeName: 'first'
  78.    }
  79.   },
  80.   
  81.   computed:{
  82.    ...mapState(['editIndex','sortApi','editShow'])
  83.   },
  84.   methods:{
  85.    setStyle(value,style){
  86.     //根据上面传入的style属性，实时改变现有的值
  87.     this.$set(this.sortApi[this.editIndex].style,style,value);
  88.    }
  89.   }
  90.  }
  91. </script>

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

  1. //按钮组件，其实里面很简单
  2. //组件的对应的编辑组件，里面内容和这个也差不多，下面就不写了
  3. <template>
  4.  <p class="btn-box ui-sortable" :data-code="content.code">
  5.   <el-button class="ui-btn"
  6.    :style="oStyle">
  7.    {{ content.text }}
  8.   </el-button>
  9.   //因为每个组件都有删除功能，所以写成了一个组件
  10.   <DeleteCp :aIndex="aIndex"></DeleteCp>
  11.  </p>
  12. </template>
  13. <script>
  14.  import DeleteCp from "@/components/DeleteCp";
  15.  export default {
  16.   name: 'Btn',
  17.   props: { //父组件传入的参数
  18.    content: Object,
  19.    oStyle: Object,
  20.    aIndex: Number
  21.   },
  22.   components: {
  23.    DeleteCp
  24.   },
  25.   data(){
  26.    return{
  27.     btnModel: 'btn-model'
  28.    }
  29.   }
  30.  }
  31. </script>

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

  1. <template>
  2.  <p class="delete-compontent-box">
  3.   <p class="el-icon-delete remove-component" @click.stop="dailogStatu"></p>
  4.   <el-dialog
  5.    title="提示"
  6.    :visible.sync="dialogVisible"
  7.    :append-to-body="appendToBody"
  8.    width="430px">
  9.    <p class="el-message-box__content">
  10.     <p class="el-message-box__status el-icon-warning"></p>
  11.     <p class="el-message-box__message dialog-message">此操作将删除该模块, 是否继续?</p>
  12.    </p>
  13.    <span slot="footer" class="dialog-footer">
  14.     <el-button @click="dialogVisible = false" size="small">取 消</el-button>
  15.     <el-button type="primary" @click="onRemove(aIndex)" size="small">确 定</el-button>
  16.    </span>
  17.   </el-dialog>
  18.  </p>
  19. </template>
  20. <script>
  21.  import { mapMutations } from "vuex";
  22.  export default {
  23.   name: 'oText',
  24.   props: {
  25.    aIndex: Number
  26.   },
  27.   data(){
  28.    return{
  29.     //这两个参数是弹框的参数
  30.     dialogVisible: false,
  31.     appendToBody: true 
  32.    }
  33.   },
  34.   methods:{
  35.    ...mapMutations(['deleteCp','setCommon']),
  36.    dailogStatu(){
  37.    //主要是控制弹窗出来，并且显示该组件对应的编辑栏
  38.     this.dialogVisible = true;
  39.     this.setCommon({flag: true,index: this.aIndex})
  40.    },
  41.    onRemove(index){
  42.     //点击确定删除对应的组件
  43.     let flag = false;
  44.     this.deleteCp(index);
  45.     this.dialogVisible = false;
  46.     this.$message({
  47.      message: '该模块已删除 !',
  48.      type: 'success'
  49.     });
  50.     this.setCommon({flag: false,index: 0})
  51.    }
  52.   }
  53.  }
  54. </script>


-> 来看看效果图吧

效果图展示

结束语

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

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

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

相关文章：

使用selenium抓取淘宝数据信息

使用npm安装Electron失败的问题

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

以上就是vue如何制作自动建站项目（详细教程）的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！