vue学习笔记 (vue在idea的结构,idea中执行npm命令和配置环境变量,element-ui安装和使用,avue的安装与使用)

1、idea中vue基本使用:

刚开始用ideavue时,在网上找了一些博客,发现都只教到ideavue的安装和配置。像我这种萌新,创建完vue项目后可能会一脸懵,我连写代码的入口都不知道在哪。还有各个文件中变量的传递和对应关系也搞不明白,尴尬。于是乎,我把项目中的文件翻了一下,终于看到点眉目了。下面来理一下结构,主要想记录一下,以便以后换环境能马上适应和配置上。

vue项目的目录结构:
vue学习笔记 (vue在idea的结构,idea中执行npm命令和配置环境变量,element-ui安装和使用,avue的安装与使用)_第1张图片
尝试着在里面写代码,发现在新建项目的实例中的app.vueHelloWorld.vue中修改代码,然后运行,都可以在localhost:8080/产生变化,app控制的界面在上半边,helloworld控制的界面在下半边。这两个vue实际上就是页面两个组件,有这样的效果,是因为app.vue中使用了HelloWorld组件,所以显示是上面显示app组件的标签,下面是HelloWorld组件的标签。
vue学习笔记 (vue在idea的结构,idea中执行npm命令和配置环境变量,element-ui安装和使用,avue的安装与使用)_第2张图片
实际上的入口是public中的index.html,对应的jssrc中的main.js。观察两个文件中的代码,发现main.js中导入了app.vue组件,实例化了vue并添加了app.vue中的idappdiv标签。
vue学习笔记 (vue在idea的结构,idea中执行npm命令和配置环境变量,element-ui安装和使用,avue的安装与使用)_第3张图片
然后index.html使用了这个div,由app.vue中的代码,这个div就是由apphelloworld拼成的。
在这里插入图片描述
试验一下。比如,在components文件夹上右击,然后新建->vue组件->hi.vue,在里面添加下列代码:

<template>
  <div id="ab">
    <img alt="Vue logo" src="../assets/logo.png">
    <h>哈哈哈哈哈哈h>
  div>
template>

<script>
export default {
  name: "hi"
}
script>
<style scoped>
style>

修改main.js并实例化hi组件:(别忘了把其他组件的import注释掉,不然会报错)
vue学习笔记 (vue在idea的结构,idea中执行npm命令和配置环境变量,element-ui安装和使用,avue的安装与使用)_第4张图片
index.html中使用idabdiv
在这里插入图片描述
点击运行:
vue学习笔记 (vue在idea的结构,idea中执行npm命令和配置环境变量,element-ui安装和使用,avue的安装与使用)_第5张图片

理清这些,就可以像之前的前端步骤一样开始编程了。可以自定义vue组件,然后放到js中实例化,显示到网页中。也可以不使用vue,单独在index.htmlhtml代码。

2、idea中执行npm命令:

idea中使用命令行快捷键:alt + F12

首先说明,我的npm是在idea创建项目时,自动安装的。如果在cmdidea的终端中执行npm -v ,提示npm不是内部指令。
vue学习笔记 (vue在idea的结构,idea中执行npm命令和配置环境变量,element-ui安装和使用,avue的安装与使用)_第6张图片
是因为系统找不到npm的环境变量,所以要配置一下环境变量。
vue学习笔记 (vue在idea的结构,idea中执行npm命令和配置环境变量,element-ui安装和使用,avue的安装与使用)_第7张图片
点击idea右上角的npm配置,选择编辑配置。
vue学习笔记 (vue在idea的结构,idea中执行npm命令和配置环境变量,element-ui安装和使用,avue的安装与使用)_第8张图片
点开节点解释器,就能看到idea为我们安装的npm的位置了。路径不是很完整,我的路径是:C:\Users\Administrator\AppData\Roaming\JetBrains\IntelliJIdea2020.3\node\node-v14.15.0-win-x64。一般都在这个位置,如果找不到,应该是被隐藏了,在上面的查看中勾选显示隐藏项目。

到路径下看一下nodenpm是不是都在那。
vue学习笔记 (vue在idea的结构,idea中执行npm命令和配置环境变量,element-ui安装和使用,avue的安装与使用)_第9张图片
然后在用户环境变量中添加这个路径:
在这里插入图片描述
重启idea,然后再次尝试就发现可以识别了:
在这里插入图片描述
如果发现配置完环境变量,但是在cmd中可以识别,在idea中不能,就在文件->设置->工具->终端中,将默认的shell替换为系统的cmd,然后重启idea

vue学习笔记 (vue在idea的结构,idea中执行npm命令和配置环境变量,element-ui安装和使用,avue的安装与使用)_第10张图片

3、 element-ui安装和使用:

(1)安装:

idea终端执行:npm i element-ui -S
vue学习笔记 (vue在idea的结构,idea中执行npm命令和配置环境变量,element-ui安装和使用,avue的安装与使用)_第11张图片

(2)使用:

main.js中添加:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//vue中使用 element-ui 
Vue.use(ElementUI)

接着就可以在vue中使用了,这与之前的bootstrap不一样,不是直接在html中引入,所以不能直接在index.html中使用。此时可以修改App.vue代码,以创建几个按钮为例:

<template>
  <div id="app">
    <el-button>默认按钮 </el-button>
    <el-button type="primary">主要 </el-button>
    <el-button type="text">文字 </el-button>
    <el-button type="success">成功</el-button>
    <el-button type="warning">警告</el-button>
    <el-button type="danger">危险</el-button>
    <el-button type="info">信息</el-button>
  </div>
</template>

<style>
#app{
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

确保index.html中使用了app标签:


<div style="background:#ffffaa;">
    <div id="app">div>
div>

运行结果:
在这里插入图片描述

4、avue的安装与使用:

avue网站:https://avuejs.com/。

由于avue是基于element-ui框架的,所以先去把上面的element-ui装好。

(1)安装:

idea的终端执行npm i @smallwei/avue -S
vue学习笔记 (vue在idea的结构,idea中执行npm命令和配置环境变量,element-ui安装和使用,avue的安装与使用)_第12张图片
再执行npm install axios

(2)引入avue:

main.js中引入avue

import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
import axios from 'axios'
window.axios=axios
Vue.use(ElementUI).use(Avue);
(3)示例1:

以下两段示例代码都是从avue官网->文档复制过来的。

修改App.vue

<template>
  <div id="app">
    <el-row :span="24">
      <el-col :span="6">
        值:{{form}}<br>
        <avue-input-tree default-expand-all v-model="form" placeholder="请选择内容" type="tree" :dic="dic">avue-input-tree>
      el-col>
      <el-col :span="24">el-col>
      <el-col :span="6">
        包含父类值:{{form1}}<br>
        <avue-input-tree multiple v-model="form1" placeholder="请选择内容" type="tree" :dic="dic">avue-input-tree>
      el-col>
      <el-col :span="24">el-col>
      <el-col :span="6">
        不包含父类值:{{form2}}<br>
        <avue-input-tree leaf-only="" multiple v-model="form2" placeholder="请选择内容" type="tree" :dic="dic">avue-input-tree>
      el-col>
      <el-col :span="24">el-col>
      <el-col :span="6">
        半选是否包含父类值:{{form33}}<br>
        半选是不包含父类值:{{form3}}<br>
        <avue-input-tree ref="tree" include-half-checked="" multiple v-model="form3" placeholder="请选择内容" type="tree" :dic="dic">avue-input-tree>
      el-col>
      <el-col :span="24">el-col>
      <el-col :span="6">
        父子不关联:{{form4}}<br>
        <avue-input-tree :check-strictly="true" multiple v-model="form4" placeholder="请选择内容" type="tree" :dic="dic">avue-input-tree>
      el-col>
    el-row>
  div>
template>
<script>
export default {
  data() {
    return {
      form:'',
      form1:[0,1,2,3,4],
      form2:[1,2,3],
      form3:[2,1],
      form33:[],
      form4:[0],
      dic:[{
        label:'选项1',
        value:0,
        children:[{
          label:'选项3',
          value:2
        },{
          label:'选项4',
          value:3
        }]
      },{
        label:'选项2',
        value:1
      }]
    }
  },
  watch:{
    form3:{
      handler() {
        setTimeout(()=>{
          this.form33=this.$refs.tree.getHalfList();
        },0)
      },
      immediate: true,
    }
  }
}
script>

vue学习笔记 (vue在idea的结构,idea中执行npm命令和配置环境变量,element-ui安装和使用,avue的安装与使用)_第13张图片

(4)示例2:

修改App.vue

<template>
  <div id="app">
    <avue-crud :data="filteredData" v-loadmore="handelLoadmore" :option="option" :data-size="tableData.length"></avue-crud>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      option:{
        height:300,
        expand:true,
        selection:true,
        selectionFixed:false,
        expandFixed:false,
        menuFixed:false,
        column:[{
          label:'姓名',
          prop:'name',
          width:200,
        },{
          label:'年龄',
          prop:'sex'
        }]
      },
      currentStartIndex: 0,
      currentEndIndex: 20
    };
  },
  directives:{
    loadmore:{
      componentUpdated: function (el, binding, vnode, oldVnode) {
        // 设置默认溢出显示数量
        var spillDataNum = 20;

        // 设置隐藏函数
        var timeout = false;
        let setRowDisableNone = function (topNum, showRowNum, binding) {
          if (timeout) {
            clearTimeout(timeout);
          }
          timeout = setTimeout(() => {
            binding.value.call(null, topNum, topNum + showRowNum + spillDataNum);
          });
        };
        setTimeout(() => {
          const dataSize = vnode.data.attrs['data-size'];
          const oldDataSize = oldVnode.data.attrs['data-size'];
          if (dataSize === oldDataSize) return;
          const selectWrap = el.querySelector('.el-table__body-wrapper');
          const selectTbody = selectWrap.querySelector('table tbody');
          const selectRow = selectWrap.querySelector('table tr');
          if (!selectRow) {
            return;
          }
          const rowHeight = selectRow.clientHeight;
          let showRowNum = Math.round(selectWrap.clientHeight / rowHeight);

          const createElementTR = document.createElement('tr');
          let createElementTRHeight = (dataSize - showRowNum - spillDataNum) * rowHeight;
          createElementTR.setAttribute('style', `height: ${createElementTRHeight}px;`);
          selectTbody.append(createElementTR);

          // 监听滚动后事件
          selectWrap.addEventListener('scroll', function () {
            let topPx = this.scrollTop - spillDataNum * rowHeight;
            let topNum = Math.round(topPx / rowHeight);
            let minTopNum = dataSize - spillDataNum - showRowNum;
            if (topNum > minTopNum) {
              topNum = minTopNum;
            }
            if (topNum < 0) {
              topNum = 0;
              topPx = 0;
            }
            selectTbody.setAttribute('style', `transform: translateY(${topPx}px)`);
            createElementTR.setAttribute('style', `height: ${createElementTRHeight - topPx > 0 ? createElementTRHeight - topPx : 0}px;`);
            setRowDisableNone(topNum, showRowNum, binding);
          })
        });
      }
    }
  },
  created() {
    this.getTableData();
  },
  computed: {
    filteredData() {
      let list = this.tableData.filter((item, index) => {
        if (index < this.currentStartIndex) {
          return false;
        } else if (index > this.currentEndIndex) {
          return false;
        } else {
          return true;
        }
      });
      return list
    }
  },
  methods: {
    handelLoadmore(currentStartIndex, currentEndIndex) {
      this.currentStartIndex = currentStartIndex;
      this.currentEndIndex = currentEndIndex;
    },
    getTableData() {
      let cont = 0;
      let tableData = [];
      while (cont < 10000) {
        cont = cont + 1;
        let object = {
          name: '王小虎' + cont,
          sex:cont
        }
        tableData.push(object);
      }
      setTimeout(() => {
        this.tableData = tableData;
      }, 0);
    }
  }
}
</script>

运行结果:
vue学习笔记 (vue在idea的结构,idea中执行npm命令和配置环境变量,element-ui安装和使用,avue的安装与使用)_第14张图片

你可能感兴趣的:(web)