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

使用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>