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>