【重点突破】—— vue+webpack+axios初始化搭建项目框架（转）

前言：这个教程从零开始一步一步说明搭建一个完整实用vue项目的所有流程，vue-cli + webpack + vue-router + ant-design-vue + axios。在原教程基础上完善了axios封装请求，UI组件库换用ant-design-vue，项目github地址。(教程转载自GQguoqi博客)

---

一、准备工作

在用Vue.js构建大型应用的时候推荐使用NPM安装方法，需要的东西：

• node.js环境(npm包管理器)
• cnpm/npm的淘宝镜像
• vue-cli 脚手架构建工具
• webapck

1、安装node

去node官网 https://nodejs.org/en/ 下载，一路下一步即可。一般我选择更多人用的稳定版:

vue-cli官方文档对Node 版本也有要求，必须参考：

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

安装完成后，打开命令行(快捷键window+R，输入cmd回车)，输入指令node -v查看node的版本，若出现相应的版本号，说明安装成功：

2、安装npm

其实npm包管理器是集成在node中的，在Node.js安装时就顺带装好了。可用命令行npm -v查看版本：

但注意这未必是最新的版本，更新npm版本指令(三选一):

npm -g install npm@2.9.1 (安装固定某个版本，举个例子，不用跟着这个版本号)
npm install npm -g (g即全局；install是安装，可缩写成i，so，这个命令也可以写作 npm i npm -g)
npm update -g

 

3、安装vue-cli 脚手架构建工具(必须在全局中进行安装)

vue-cli官网： https://cli.vuejs.org/zh

vue-cli用于快速搭建大型单页应用,可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

在官方文档中有说明：

• 关于旧版本：Vue CLI 的包名称由 vue-cli 改成了 @vue/cli
• vue-cli最新版本，要求node版本>12，如果node版本是10.x，可以安装@vue/cli@3.12.1

//安装命令
npm install -g @vue/cli

//检查其版本是否正确
vue --version

 

4、webpack

注意 : 在安装vue-cli时，已经自带安装webpack

二、构建项目

1、进入项目目录下

两种途径：

• 在 cmd 中f: 回车可直接进入F盘，cd进入特定目录(workspace)下：
• 有git bash进入到目录下，右键菜单里选择 “git bash here”

        

2、构建名字为my_test的项目

输入命令行 vue init webpack my_test 回车(名字自定义)。

之后程序会问一堆问题，仔细看下每个选项。进行下一个按回车，如果不认可默认内容就直接输入自己的内容；或者输入y/n；或向上向下切换选项。设置项如下：

• Project name ：项目名称 。注意：这里不能使用大写，
• Project description：项目描述。
• Author：作者，如果你有配置git的作者，他会读取。
• vue的打包方式Runtime Only (runtime方式)和 Runtime+Compiler(standalone方式)：二选一，默认是常用的Runtime+Compiler，不需要自己手写render。

1. Runtime Only更加轻量，但是缺点是不能够编译jsx，在vue源码中，无论是render函数，还是template最终都是编译成render函数进行渲染的。所以，使用Runtime Only有时需要自己手动配置webpack对模板语法进行编译。
2. 对这两者的理解不是很深刻，我就选了常用的的compiler

          

• Install vue-router ? 是否安装vue的路由插件，当然需要。
• Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。建议不要，要求特别严格，一不小心就报错。
• setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，看自己，我不用
• Setup e2e tests with Nightwatch? 是否安装e2e来进行用户行为模拟测试，看自己，我不用
• 选择使用npm或yarn进行安装模块，我选yes。

1. 这里注意它的提示，should we run ‘npm install’ ……，在选择yes的时候，表示你让程序自动运行命令npm install，你自己就不用手动输入np install来安装依赖了。

         

这些都选完了，就开始构建项目了，耐心等待，完成后就有了项目文件夹：