zoukankan      html  css  js  c++  java
  • vue-cli 脚手架安装

    1.官网地址 https://cli.vuejs.org/zh/guide/installation.html 版本v.4.2.2及以上
    2.node版本v12.11.1 https://nodejs.org/zh-cn/download/releases/ 最好对应版本,不用安装最新
    3.vue create test 创建项目 选择 Manually select features,不选default
    选择 1.node-sass 2.babel 3.router 4.vuex
    4.安装完成之后 会有一个src文件夹
    ![图片描述](/tfl/captures/2020-04/tapd_51550018_base64_1585711452_9.png)
    5.拉取gitlub上的内容放到src里面
    6.附件里面的覆盖项目中对应的文件,然后执行npm install 安装对应的插件
    7.项目运行命令 npm run serve 打包命令 npm run build

    npm i node-sass

    npm install --save-dev sass-loader
    //sass-loader依赖于node-sass
    npm install --save-dev node-sass

    组件

    element

    https://element.eleme.cn/#/zh-CN/component/select

    <template>
    <div class="img_wraper">
    <div v-for="(item,index) in list" :key="index">
    <div v-if="(/(.*).(word|docx)$/).test(item)" class="pdf_wraper">
    <!-- <i style="position:absolute;top:0;left:0" class="el-icon-tickets"></i> -->
    <i class="el-icon-download down" @click="downFile(item)"></i>
    </div>
    <div v-else>
    <el-image :src="item" :preview-src-list="list"></el-image>
    </div>
    </div>
    </div>
    </template>
     
    <script>
    export default {
    /**
    *
    * 传入一个array,自动判断显示什么文件
    */
    //name: "component_name",
    props: {
    list: {
    type: Array,
    default: function() {
    return [];
    }
    }
    },
    computed: {},
    watch: {},
    data() {
    return {};
    },
    methods: {
    downFile(item) {
    window.open(item, "_blank");
    }
    },
    beforeCreated() {},
    created() {},
    mounted() {},
    components: {}
    };
    </script>
     
  • 相关阅读:
    使用Quartz2D实现时钟动画(二)
    使用Quartz2D实现时钟动画(一)
    排序算法的基本思想和OC代码实现
    OC命名规范及代码注释规范
    OC中Foundation框架的基本对象之数字对象
    iOS并排按钮点击联动效果封装
    iOS图片处理
    个人面试总结
    Objective和Swift,你该选择哪个
    网络开发中socket简介
  • 原文地址:https://www.cnblogs.com/ywsheng/p/12766410.html
Copyright © 2011-2022 走看看