不使用 vue-cli 去搭建一个 vue + webpack 的准备项目 （插件、配置详解）（一）准备和起步

一、准备

准备（不多说）： 

1. 全局安装 vue vue-cli 

2. 全局安装 webpack webpack-cli

3. 全局安装 node 

二、起步

（1）创建项目文件夹，进入项目文件夹并打开命令行，输入：

npm init

然后一路回车

此时在根目录下会生成： package.json 文件

（2）创建index.html文件，并在项目下安装 vue、webpack

创建index.html在根目录，然后在命令行内输入：

npm i --save-dev webpack webpack-cli webpack-dev-server // 安装webpack webpack-cli 以及devServer

npm i --save vue  // 安装vue 


说明： 为什么要加 --save-dev 命令？

答： 在 package.json 中，有2个属性，分别是 “dependencies” 和 “devDependencies”，两者的不同之处在于:

devDependencies : 该模块中所列举的插件属于开发环境的依赖，

dependencies: 该模块中所列举的插件属于生产环境的依赖

当加上 --save-dev的时候，代表着该插件只应用于 本地开发环境，而只有--save则代表着不仅应用于开发，还应用于生成环境。

全部完成后，在文件目录下会出现4个文件，分别是 node_modules、index.html、package.json 和 package-lock.json，package-lock.json的意义在于锁住依赖库的版本，确保项目中使用的各依赖库版本不会被更新。

（3）创建 main.js文件，创建webpack.config.js 文件，创建src目录，并在src目录下创建App.vue文件

完成以上后，进入main.js文件，输入以下代码：

import Vue from 'vue'
import App from './src/App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')

我们已经创建了.vue文件，注意，这种文件浏览器是不认识的，webpack也不认识这种文件，如果想让webpack打包的时候能够解析这种文件，我们需要安装 vue-loader 和  vue-template-compiler，帮助webpack去解析.vue文件。

注意： webpack本身并不支持对很多种文件的解析，比如css文件，vue单文件，图片文件等等，如果想要让webpack支持这种文件的解析，那么必须安装相应的 loader 或者 plugin

在终端输入：

npm i --save-dev vue-loader vue-template-compiler

安装完成不代表我们就能立刻使用它，我们要在webpack上配置下才能使用！

下一章：不使用 vue-cli 去搭建一个 vue + webpack 的准备项目 （插件、配置详解）（二）webpack的配置说明