不使用cli脚手架搭建vue项目工程(webpack简单配置)

前言

  今天介绍一篇关于工程搭建的文章。主要介绍不用cli脚手架搭建一套前端工程，因为每个公司不是用脚手架工具安装一下就能进行开发了，很多时候都是对工程有一定的定制需求，你没有深入的去了解cli脚手架的话，可能会很吃力，所以这块还是需要有一定的深入了解的，内容也不是太复杂，但是你需要掌握一些vue、webpack、nodejs的简单的基本概念和认识，也挺适合初级者阅读，我们学前端的小伙伴其实都知道，前端的工程搭建不像后端，后端有一套非常健全的ide开发工具，我们不管做什么样子的项目，企业级应用的话，用j2ee;web工程用javaweb等等一些定制化的工程，都有一套。对于开发这来说，其实注重的是服务器的搭建，接口的定制，开发的调试，业务的实现。但对于前端来说，我们其实并没有太多这样的ide工具(忽略webstorm，因为没怎么使用过，才肤浅地这么认为)，但是也不排除未来会出现，我们还是一起期待吧。所以在这些工具出来之前，我们前端的同学还是得学会自己来搭一套前端工程。

  接下来我来告诉大家为什么要搭建这么一个工程。可能很多小伙伴都有类似的经历，没有经历过得朋友不用担心，未来你能理解的，也会遇到，那有过一些开发项目经验的同学应该会发现身边的同事大概有两种发展方向。一种是做业务开发的，一种是偏向于技术框架的。前者更注重业务的实现，我们知道一个项目百分之八十的时间都是用在实现业务逻辑方面，做多了我们其实会发现，这种开发的工作对我们的挑战其实并不是太大，每个公司的业务逻辑都不一样，复杂度也并不是太高，所以技术提升这一方面，其实是有一定限制的。但是存在即合理，注重这块开发的同学其实可以往管理的角度来发展，也不失为一种方向。但是对技术有一定要求的同学来说，我觉得更需要往后者的方向靠拢。前面也说了业务代码很多都是拷贝粘贴，对基本功有一定的要求，如果想从技术方向去提升自己的价值，我个人建议还是往前端工程化的方向去发展。从工程的搭建，模块化的设计，api的定制，请求的封装，本地开发模式的建立，工程上线的部署等等，这些都需要非常的熟悉。这样一来不管你到哪家公司，做什么样的项目，有一套这样的技术储备作为解决方案，你会很吃香。当然如果后期向往管理的方向发展，也是可以的，这个时候的你对技术的掌握能力，能帮助你更能准确地评估出开发的工作量，掌控项目的开发周期，比前者更准确地估算项目人力成本的预算以及开发过程中遇到的技术难题和风险点，这是非常实用的，内容较多，小白们建议某个周末早上读完。

  所以仁者见仁，每个人有每个人的发展方向，不一定按照这样的模式去丰富自己，这只是依照个人的一些实际经验做出来的总结。好了闲话不扯太多了，我们进入正式进入主题吧。

配置开发时的前端工程（vue-loader+webpack）

okay，我们先来配置我们的项目，首先我们新建一个文件夹，用vscode打开，这里开发工具的选择依照自己的喜好来。

  我们通过快捷键 ‘ctrl + ·’，也就是esc下面的小点，打开终端，我们先来用 npm init 来初始化项目，因为这里是演示demo，我全部使用的默认，大家实验的时候直接敲回车就行了。

Microsoft Windows [版本 6.1.7601]
版权所有 (c) 2009 Microsoft Corporation。保留所有权利。

E:\vue实战\vue_web>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (vue_web)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to E:\vue实战\vue_web\package.json:

{
  "name": "vue_web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes

E:\vue实战\vue_web>

这个时候细心的同学会发发现我们目录下面多一个叫package.json的文件，这个文件就是我们项目的配置文件。

好，我们先来安装一下包，因为我们用到了vue以及webpack，所以我们需要将这两个依赖包安装一下，除了这些呢，还有段落标题中的vue-loader，这个就是为了用webpack加载.vue文件，并将它编译成浏览器能认识的js文件，我们先来执行这样的指令，注：我们这里是demo，所以这里就不区分是否是dev-dependency了。(详情可以参考https://www.cnblogs.com/ayseeing/p/4128612.html)

npm i webpack vue vue-loader

 

E:\vue实战\vue_web>npm i webpack vue vue-loader
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN vue-loader@15.5.1 requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself.
npm WARN vue_web@1.0.0 No description
npm WARN vue_web@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack@4.28.4
+ vue@2.5.22
+ vue-loader@15.5.1
added 350 packages from 286 contributors and audited 4195 packages in 153.368s
found 0 vulnerabilities


E:\vue实战\vue_web>

安装完成之后会出现一些waring，大家可以可看出来这个warning其实就是告诉我们在安装vue-loader的同事必须要安装css-loader，这里我们想它继续安装完成就可以了。

npm WARN vue_web@1.0.0 No description
npm WARN vue_web@1.0.0 No repository field.

这两个是我们项目初始化的时候由于都是回车回车，缺少一些描述，无需关心。

npm WARN optional SKIPPING OPTIONAL 
npm WARN notsup SKIPPING OPTIONAL 

这两个是告诉我们项目初始化时候哪些是可选择安装的，哪些是可以不安装的，这里我们也无需，继续执行

npm i css-loader

E:\vue实战\vue_web>npm i css-loader
npm WARN vue_web@1.0.0 No description
npm WARN vue_web@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ css-loader@2.1.0
added 18 packages from 10 contributors and audited 4301 packages in 34.711s
found 0 vulnerabilities


E:\vue实战\vue_web>

好，到这里，我们项目的大概的初始化工作就完成了。接下来我们就基于这样的目录，填充一下更丰富的细节。

我们在工程目录下新建一个src文件夹用来存放源文件，并新建一个app.vue的文件：

app.vue文件代码：

<template>
  <div id="text">
    {
  {te