【重点突破】—— 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 [email protected] (安装固定某个版本，举个例子，不用跟着这个版本号)
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/[email protected]

//安装命令
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来安装依赖了。

         

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

文件里各种配置和文件结构齐全，因为程序已经自动npm install，所以也会有存放依赖的node_modules目录：

3、运行项目

首先要命令行cd进入这个目录下，然后 npm run dev 项目就开始跑：

 

等待出现项目正在运行在8080端口的提示，项目就算运行成功了：

浏览器会自动打开这个地址 localhost:8080(如果没有自动打开网页，就在浏览器手动输入该网址)就能看到下面这个类似“hello world”的网页了：

注意：

• 运行过程中回报很多warn警告，不影响运行的情况下不必关心，只有报error时才需要你去解决。
• 如果没有(上面标黄色那步)允许程序自动运行‘npm install’，在run dev之前一定要手动npm install。

三、运行-初识项目

1、为什么是localhost:8080?

为什么是这个服务地址来运行这个项目？是在config/index.js文件(如下图)里进行配置的，这是项目配置文件：　

• 8080是默认端口，你可以改成8081、8082、8083……随你。如果你此时你的8080端口在跑别的项目被占用，即使你这里没改还是8080，当npm run dev跑起来，项目会自动启用下一个没被占用的端口8081，不会跑不起来的，如下：
• 再说说localhost，就是你电脑本地的地址，你会发现，你在自己的电脑上玩很顺，但是如果你开发时产品或者ui看下效果，你给她localhost:8080这个地址她是无法访问的，在她的电脑上localhost是指她的家，她家里没跑这个项目。这个情况下，你可以将这个host的值改成你电脑的ip地址(如下图所示)： 

         

         这样只要你的电脑里项目是运行状态，在你自己的电脑和在别人的电脑都可以通过下面这个地址来访问你的项目(马赛克的部分是ip)：

           

2、为什么是npm run dev?

 run就是运行，dev意指开发环境，这个‘dev’定义在在package.json文件的scrips对象中：

 这个很长的命令是执行bulid/webpack.dev.conf.js文件的配置，看这个文件的代码就会知道就是在这规定main.js是入口文件，生成后的文件注入index.html文件中。

3、index.html

• index.html这个传统的html文件就是入口文件.如果是单页面项目，那么你的项目里也就这么一个html文件，meta头、编码、title、css外链和js文件调用都在这。
• 当然既然在webpack的项目下，我们所有的js、css都以模块的形式引入(怎么引入下面说)，而不像传统的那样在head或者body底部引入。
• 这个文件里什么都没有，只有个id=app的div块，这个#app块就是关键，记做①(如下图)，我们的页面就在这个div块里。

        

        此时我打开控制台，dom树里也有个#app的div结构，记做②如下图：

          

     那是不是①的#app就是②的#app呢？……并不是，页面上的②的#app在哪？(见4)又是怎样被放在①中的？(见5)下面我们一个一个说明。 

4、App.vue

②的#app就在src/App.vue里，如下图(同样用②标记)， 改变红圈中的id名，页面查看元素中dom树的id名也会跟着改变，而且很明显，这个.vue文件里有页面上的logo图片，还有路由入口。　　

 

 上面我们说项目里只有一个html页面，其他的所有页面都是.vue文件，都看做组件，这个App.vue就是根组件 。

5、main.js

清楚了页面在根组件App.vue里，那么根组件是怎么放进index.html的①中的？就靠main.js来牵线搭桥。src/main.js是入口js文件，看看它做了什么：

 

• 首先，引入vue模块
• 引入App.vue并命名为App
• 引入vue-router路由的配置文件(注意，不是vue-router本身)
• 然后创建vue实例，这是根实例，注册App根组件(components)，最终把这个根实例挂载到index.html的#app上(el)，

四、打包-项目初成

1、打包

在项目目录下输入命令进行打包：npm run build　

2、为什么是npm run build?

 

主要的操作是

• 自动创建dist目录，每次执行该命令都会自动清空dist目录重新导入，不需要手动删除其中的文件。
• copy static目录到dist目录(单纯复制)
• 根据webpack.prod.conf.js配置文件，对源码进行编译(主要是src目录下的代码)，输出到dist目录

3、本地运行打包后的文件

打包在dist目录下后生成一个html文件和一个static文件夹，staic目录下存放整个项目的所有资源，包括css、js、图片、字体等。 

 

 双击index.html文件根本无法访问页面，我们这里借助http-server方法。

1. 首先全局安装http-server：npm install http-server -g
2. 进入到项目的dist目录下输入指令http-server ，回车就会启动服务(如下图)来运行这个目录下的index.html，在浏览器输入其中任意一个url，就能运行这个打包好的项目了

         

五、Less/Sass

1、less-loader/sass-loader

• 在webpack的项目中你会看到各种loader,当你系统学习webpack官方文档就会看到加载器这个大章节，这是中文文档地址：https://www.html.cn/doc/webpack2/loaders/
• webpack 可以使用 loader 来预处理文件。也就是我们用了less就必须有less-loader(sass同样也需要sass-loader)

2、使用less-loader/sass-loader

• 第一步，安装less-loader/sass-loader

1. 在项目目录下输入命令：npm install --save-dev less-loader less sass-loader node-sasss进行安装，
2. 之后就会看到在package.json的"devDependencies"里增加模块：

• 第二步，在webpack.base.conf.js文件里增加这段代码

 

3、注意事项

上面几种问题，有部分情况是因为无法使用less语法，但也有一部分是其他问题，总结下使用时的注意事项(在less-loader正常工作的条件下)：

• 在