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>