欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue-cli快速构建工程 ElementUI axios router 引入使用

程序员文章站 2022-06-06 20:25:31
...

使用vue-cli脚手架构建工程

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

工程结构

├── build/                      # webpack config files    构建工具配置文件
│   └── ...
├── config/
│   ├── index.js                # main project config    主工程配置
│   └── ...
├── src/
│   ├── main.js                 # app entry file    app入口文件
│   ├── App.vue                 # main app component    主工程组件
│   ├── components/             # ui components    UI组件
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)    模块资源
│       └── ...
├── static/                     # pure static assets (directly copied)    单一的静态资源
├── test/
│   └── unit/                   # unit tests
│   │   ├── specs/              # test spec files
│   │   ├── eslintrc            # config file for eslint with extra settings only for unit tests
│   │   ├── index.js            # test build entry file
│   │   ├── jest.conf.js        # Config file when using Jest for unit tests
│   │   └── karma.conf.js       # test runner config file when using Karma for unit tests
│   │   ├── setup.js            # file that runs before Jest runs your unit tests
│   └── e2e/                    # e2e tests
│   │   ├── specs/              # test spec files
│   │   ├── custom-assertions/  # custom assertions for e2e tests
│   │   ├── runner.js           # test runner script
│   │   └── nightwatch.conf.js  # test runner config file
├── .babelrc                    # babel config
├── .editorconfig               # indentation, spaces/tabs and similar settings for your editor
├── .eslintrc.js                # eslint config
├── .eslintignore               # eslint ignore rules
├── .gitignore                  # sensible defaults for gitignore
├── .postcssrc.js               # postcss config
├── index.html                  # index.html template
├── package.json                # build scripts and dependencies
└── README.md                   # Default README file

安装Element

npm i element-ui -S

安装axios

npm i axios -D

<script>
import axios from 'axios'
export default  {
  name:"",
  data () {
    return {
      tableData:[],
      dialogVisible:false,
      currentType:'全部',
      types:['全部','测试活动','免费活动','收费活动'],
      selectItems:[]
    }
  },
  
  created(){
    //var _this = this
    axios.get("/static/json/test.json").then((response)=>{
      this.tableData = response.data.list;
      console.log(response.data.list);
    }).catch(function(err){
      console.log(err);
    });
  },
  methods:{
    removeConfirm:function(){
      this.dialogVisible = true;
    },
    selectionChange:function(val){
      //我们要获取的是已经选中的全部
      var arr = [];
      val.forEach(function(item){
        arr.push(item);
      });
      this.selectItems = arr;//拿到选中的值
      console.log(this.selectItems);
    },
    handleRemove:function(){
      console.log("Hai");
      //数据和已经选择的数据做对比,然后选择删除
      var tableData = this.tableData;
      //这里建议使用indexOf
      this.selectItems.forEach(function(id){
        tableData.forEach(function(data){
            console.log(data);
            console.log(id);
            console.log("Haiiii");
            if(id.id == data.id){
              tableData.splice(tableData.indexOf(data),1);
            }
        });
      });
        this.selectItems = [];
        this.dialogVisible = false;
    }
  }
}



</script>