1.安装步骤

1.在使用新版本@vu/cli脚手架前，需要先卸载老版本
npm uninstall vue-cli-g 或 yarn global remove vue-cli
2.安装@vue/cli
npm i -g @vue/cli
3.创建vue项目
vue create 项目名
4.进入项目
cd 项目名
5.启动项目
npm run serve

2.生成的文件夹

src的component文件夹放的是普通组件
src的views文件夹放的是路由组件
public放不会变动的文件静态资源

3.vue脚手架引入axios的三种方式

1.局部调用

  • 安装axios npm i axios —save-dev
  • 在使用的组件中，通过 import axios from ‘axios’ 来引入

  • 在需要调用axios的方法中使用axios.get()来进行数据请求

    2.全局调用

  • 安装axios和vue-axios npm i axios vue-axios

  • 在main.js入口中，使用import引入和vue.use进行调用

import axios from ‘axios’
import VueAxios from ‘vue-axios’
Vue.use(VueAxios,axios)

  • 在需要调用axios的组件方法中，使用 this.axios.get()来进行请求

    3.全局调用

  • 安装axios npm i axios —save-dev

  • 在main.js文件中使用import引入，然后配置vue.prototype

import axios from ‘axios’
Vue.prototype.axios=axios

  • 在需要调用axios的组件方法中，使用 this.axios.get()来进行请求

    4.注意

    1.普通组件在哪个路由组件中使用，就在哪个路由组件中注册 ```javascript 在使用的组件中写 import tab from ‘../components/Tab’

export default{ components:{ tab:tab
} } ``` 2.在router下的index.js中配置路由前，需要把路由组件引进来
import Index from ‘../views/Index.vue’
3.在组件中的 export default{} 中可以写data,methods,钩子函数等
4.每个组件都可以在自己页面的style中编写样式，若style标签中添加scoped属性 代表样式只在本组件内生效