目录

1. 起步
2. vue-cli 基础用法
3. 目录结构介绍
4. 项目启动
5. 跨域设置

简介

Vue.js开发的标准工具，vue-cli就是一个官方提供的脚手架工具，操作步骤简单，通过终端命令生成项目，而项目里集成了 webpack、ESlint、babel 等配置和相关依赖，大大节省了开发的时间和提高开发的效率。

1. 起步

安装环境，安装需求：

1. 电脑需要安装node.js 和 npm
2. 全局安装webpack 打包工具（高版本的可能要配合webpack-cli使用）
3. 全局安装 vue
4. 全局安装 vue-cli

1.1 nodejs 安装

• window用户直接到官网下载安装就可以了，下载地址 https://nodejs.org/zh-cn/download/
• Linux 用户安装
  • sudo apt-get install -y nodejs 安装 nodejs
  • sudo apt-get install -y npm

安装成功后，打开终端查看版本信息：

• Windows用户win键+r 输入cmd 打开终端
• Linux就直接打开终端就行了

两个系统看版本号的代码是一样的。

查看node版本 输入代码node -v

查看npm版本号 输入代码 npm -v

两个版本号出来就OK啦~~

1.2 webpack安装

webpack 是通过npm来安装的，webpack要配合webpack-cli 一起来使用，所以我们在终端输入

npm install -g webpack webpack-cli

输入 webpack -v 查看版本信息。

1.3 vue和vue-cli 安装

vue和vue-cli的安装也是通过npm来进行安装的，在终端输入 npm install -g vue vue-cli 两个一起安装。

输入 vue -V 查看版本信息：

到这里基本的环境和工具都配置好了，我们就可以愉快做项目了。

2. vue-cli 基础用法

使用vue-cli提供的 webpack模板 进行快速开发，我们只需在终端输入 vue init webpack projectName 进行模板的下载，然后用编辑器打开下载好的模板就行了。注意文件的路径，还有项目的名称不能大写和中文 。

以上的选项是我个人的习惯，仅供参考。上面的步骤走完了，就静待它下载完。

最后就用编辑器打开新建好的项目就可以进行愉快的敲代码了。

3. 目录结构介绍

目录结构如下：

目录解释：

4. 项目启动

启动命令：

npm run dev

注意：要在项目目录下打开终端启动

启动成功后，在浏览器输入 localhost:8080

5. 跨域设置

打开 config/index.js 文件找到proxyTable 对象

proxyTable: {
      '/': {
        target: 'https://api.myjson.com/',   // 目标接口域名
        changeOrigin: true,  //是否跨域
      }
    },

总结

vue-cli 已经更新到3.0的版本了，这个仅供参考。不过操作也是大同小异。