vue-cli脚手架配置教程

目录

一、脚手架简介

1. webpack

2、脚手架介绍

3、创建vue-cli4项目

三、项目结构说明

1、项目结构

2、src目录说明

3、单文件组件

4、vue.config.js 文件

四、安装axios包

1、安装axios

2、vue-cli 中main.js引入并使用 axios

五、VUE-CLI解决跨域问题

---

一、脚手架简介

Vue脚手架是Vue官方提供的标准化开发工具（开发平台），它提供命令行和UI界面，方便创建vue工程、配置第三方依赖、编译vue工程

1. webpack

前端项目工程化的标志之一就是引入了『编译』环节，而 webpack 就是最常见、最常用的前端项目编译工具。

如果作类比的话，那么 npm + webpack ≈ maven

2、脚手架介绍

a、安装vue-cli4

• 删除已安装的 vue-cli

npm uninstall -g @vue/cli

• 先安装淘宝镜

npm config set registry https://registry.npm.taobao.org

安装cli

npm install -g @vue/cli

安装结束后，你可以通过 vue --version 或 vue -V 查看 vue-cli 的版本信息

b、配置vue环境变量

把这个路径配到path里

3、创建vue-cli4项目

3.1、第一步

使用如下命令开始创建 vue 项目

vue create 项目名

你会看到如下内容：

• 第一项和第二项（ default ...）表示的是使用默认配置创建 vue 项目。

• 第三项（ Manually ...）表示手动对 vue 项目的各方面进行设置