vue2.0+webpack

1、查看node版本node -v

image.png

2、全局安装node-cli，npm install -g vue-cli

3、运行vue指令可以查看操作

image.png

4、运行vue list 指令可以查看可用模板

image.png

5、以webpack模板为例

image.png

6、按提示执行操作

image.png

7、运行从GitHub上下载下来的项目
npm install
npn run dev
参考文章
Eslint 规则说明

7、配置less
在命令行中输入 npm install less less-loader --save

安装less

8、配置sass
npm install node-sass --save-dev
npm install sass-loader --save-dev
这里用的是淘宝镜像故改为cnpm

image.png

9、安装与配置axios

npm install axios --save

image.png
axios使用，更多示例参见官网https://www.npmjs.com/package/axios

this.$axios({
  method: 'post',
  url: '/api/j_spring_security_check',
  data: {
      account: this.username,
      password: this.password
  }
  }).then((response)=>{
      //最好用箭头函数，不然this的指发生改变
      console.log(response);
  }).catch((err)=>{
      console.log(err);
  });

10、vue+webpack跨域配置

image.png