1. nodejs安装


2. 安装vue-cli：



npm install -g vue-cli


3. 初始化项目



vue init webpack hello


4. 项目文件解释



├─build             // 用来使用webpack打包使用的build依赖
├─config            // 用来做整个项目配置的目录
├─node_modules      // 用来管理项目中使用的以来
├─src               // 用来书写VUE的源代码 [重点]
│    ├─assets        // 用来存放静态资源 [重点]
│    ├─components    // 用来书写VUE文件 [重点]
    ├─router        // 用来配置项目中的路由 [重点]
    ├─App.vue       // 项目中的根组件 [重点]
│    └─main.js       // 项目主入口 [重点]
└─static            // 其他静态资源
│  .babelrc         // 将es6语法转为es5运行
│  .editorconfig    // 项目编辑配置
│  .gitignore       // git版本控制忽略文件
│  .postcssrc.js    // 源码相关js
│  index.html       // 项目主页
│  jsconfig.json
│  package-lock.json// package.json的锁文件
│  package.json     // 类似项目中的pom.xml  依赖管理 不建议手动修改
│  README.md        // 项目说明


5. vue项目开发方式

一切皆组件 一个组件可能包含：js html css

  • VueCli开发方式是项目中开发一个一个组件对应的业务功能模块，日后可将多个组件组合到一起形成一个前端系统
  • 日后在使用vue cli进行开发时，不再书写html，编写的是一个组件，日后打包时，vuecli会将组件编译成运行的html

6. 安装axios



npm install --save axios vue-axios


7. 配置axios



// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'  // 在页面中引入vue.js
import App from './App'  // 引入自定义组件
import router from './router'  // 引入VUE route js

import axios from 'axios'
import VueAxios form 'vue-axios'  // vscode会报错

Vue.use(VueAxios, axios)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',  // 绑定vue实例的全局作用范围
  router,  // 注册路由对象
  components: { App },  // 注册APP组件
  template: '<App/>'
})


7.1 vscode报错的处理方法


8. 使用axios



<script>
export default {
  // 暴露当前组件对象
  name: "App",
  methods:{
    handleClick(){
      this.axios.get("http://localhost:8081/users").then(response=>{
        console.log(response.data);
      });
    }
  }
};
</script>