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>
 
原文地址:https://www.cnblogs.com/ywsheng/p/12766410.html