手动搭建vue项目

一、项目环境
1、首先安装node.js
Node.js 是一个运行在服务端的框架
终端输入：
brew install nodejs 或者直接官网手动安装。
node -v 查看 nodejs版本
二、初始化项目
1、npm init 初始化项目
在指定问路径下初始化一个项目。

初始化完项目后，项目中多了个package.json的文件。这个文件就是项目的配置文件。

2、安装vue-loader
因为用到了vue以及webpack，所以需要将这两个依赖包安装一下，除了这些呢，还有段落标题中的vue-loader，这个就是为了用webpack加载.vue文件，并将它编译成浏览器能认识的js文件。

安装完成之后会出现一些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.

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

3、安装css-loader
安装命令：npm i css-loader
css-loader 的作用：
处理css中的 @import 和 url 这样的外部资源
loader能把源文件翻译成新的结果，一个文件可以链式经过多个loader编译。以处理scss文件为例:
sass-loader把scss转成css
css-loader找出css中的依赖，压缩资源
style-loader把css转换成脚本加载的JavaScript代码

此时项目结构

4、新建一个src文件夹
src文件夹用了存放源文件,在src中新建一个app.vue的文件

5、入口文件
在src目录下新建一个index.js的文件作文工程的入口文件。

代码

//这是工程的入口文件
import Vue from 'vue';
import App from './app.vue';
 
const root = document.createElement('div')
document.body.appendChild(root)
 
//mount就是讲我们的App挂载到root这样一个根节点中去
new Vue({
  render: (h) => h(App)
}).$mount(root)

以上基本项目初始化就完成了，但还是不能运行，接下来就是填充项目细节。浏览器要想运行这段代码，那是不可能的，因为浏览器不认识vue，更不认识new Vue,所以webpack要登场了。
三、webpack配置
1、新建webpack.config.js文件
webpack其实就是一个帮我们打包的工具。接下来我们在工程目录下新建一个webpack.config.js文件。
我们知道webpack是用来打包的工具，我们的工程总得有个入口文件，让浏览器去访问，让webpack去打包并输出。所以这个时候我们的事情来了，配置webpack的入口和出口。我们在webpack.config.js里配上entry入口和out出口，表示webpack文件会将将entry路径下的文件，打包到out的路径。
2、配置webpack的入口和出口
代码如下：

const path = require("path");//nodejs里面的基本包，用来处理路径
 
//__dirname表示文件相对于工程的路径
module.exports ={
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  }
}

以上就是做了这样一件事，将src下的index.js文件以js的形式打包到dist目录下的bundle.js中去
3、
这时候我们打开package.json文件，修改文件。

"build": "webpack --config webpack.config.js"

添加的这个指令，就是我们在终端输入npm run build之后webpack帮我们干的一些事情。这句的意思就是webpack去帮我们执行我们新建的webpack.config.js文件。
注意这里我们使用webpack来执行指令，同样也可以在终端执行这段指令，但是我们要清楚在终端直接执行build后面的指令会出现一个问题,如我们在终端执行该指令，意味着使用的是全局的webpack，但是我们写在package.json文件下的话，意味着执行工程下面的局部wepackage，全局和局部可能会版本不一样，所以为了避免不必要的麻烦，我们在package.json文件下执行，也就是说使用的局部的webpack来打包。
4、npm run build
打包一下，配置没有完成，会报错。带着错误把问题一个一个解决。

首先，它提示我们安装cli。webpack4，所以这里必须要安装一下cli。
用cli搭建出来的项目结构如下图。

这里安装这个cli包是因为webpack4之后强制要求安装的，但是我们并没有通过该工具来初始化整个工程，所以建出来的目录也是不一样的，
打包后报错

这个错误呢就是告诉你我们，需要为app.vue这个文件声明一个loader，因为webpack只支持js类型的文件，像这种vue文件是不支持的，所以我们要使用一些工具，来帮助它认识超出它理解范畴的语法。接下来便到了我们的module环节。
四、Module
1、 webpack.config.js
由于webpack存在这样的一个限制，我们就需要来使用一些工具，我们在webpack.config.js里添加module配置项。

const path = require("path");//nodejs里面的基本包，用来处理路径
 
//__dirname表示文件相对于工程的路径
module.exports ={
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
       {//通过vue-loader来识别以vue结尾的文件
         test: /.vue$/, 
         loader: 'vue-loader'
       }
    ]
  }

2、安装 npm install style-loader
webpack并没有处理css的能力，所以我们还需要在moudle添加rules配置项

const path = require("path");//nodejs里面的基本包，用来处理路径
const VueLoaderPlugin = require('vue-loader/lib/plugin');

//__dirname表示文件相对于工程的路径
module.exports = {
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  plugins: [
    // make sure to include the plugin for the magic
    new VueLoaderPlugin()
  ],
  mode: 'none',
  module: {
    rules: [
      {//通过vue-loader来识别以vue结尾的文件
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {//通过vue-loader来识别以vue结尾的文件
        test: /\.css$/,
        //css的处理方式不同，有嵌入在页面style标签里的，有从外部文件引入的，我们这里用use来声明
        use: [
          'style-loader',//接受潜在页面内部的style标签的文件。
          'css-loader'
        ]
      }
    ]
  }
}

3、安装 npm install vue-template-compiler

此时再次bulid就会成功

打好的包在dist文件夹下

五、webpack配置项目加载各种静态资源及css预处理器
1、静态资源

用use属性而不是loader属性，是因为处理css文件的方式有多种，这里出多种方式的css加载需要用到use属性，所以这里用到了use，style-loader也就是处理html文件内部的style标签内的css样式，css-loader处理的是从文件外部引入的css文件。
2、加载图片
(1)npm i url-loader file-loader

加载图片用到的loader叫‘url-loader’,它的作用是将我们的图片转换成一个base64的字串存放于我们打包生成的js里面，而不是重新生成一个文件。对于一些小的文件，几kb的文件可以帮助我们减少过多的http请求。那么url-loader其实封装了我们的file-loader，file-loader其实是将文件进行处理后换个名字存放于另一个地方。配置如下：

const path = require("path");//nodejs里面的基本包，用来处理路径
const VueLoaderPlugin = require('vue-loader/lib/plugin');

//__dirname表示文件相对于工程的路径
module.exports = {
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  plugins: [
    // make sure to include the plugin for the magic
    new VueLoaderPlugin()
  ],
  mode: 'none',
  module: {
    rules: [
      {//通过vue-loader来识别以vue结尾的文件
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {//通过vue-loader来识别以vue结尾的文件
        test: /\.css$/,
        //css的处理方式不同，有嵌入在页面style标签里的，有从外部文件引入的，我们这里用use来声明
        use: [
          'style-loader',//接受潜在页面内部的style标签的文件。
          'css-loader'
        ]
      },
      {//处理图片文件
        test: /\.(gif|jpg|jpeg|png|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1024,
              name: '[name]-aaa.[ext]'
            }
          },
        ]
      }
    ]
  }
}

使用的use属性，不同的是数组里面使用的对象，因为我们对图片还需要进行一些更细化的配置，像图片的大小(limit)，文件名称(name)有时都是需要进行配置的，所以这里使用了对象。
3、新建assets目录
在assets目录下新建styles目录（存放样式文件）和imgs目录（存放图片）

修改页面
六、webpack配置webpack-dev-server
1、安装webpack-dev-server
这个包是咱们在开发环境用的包处理工具，我们这里先install这个包。
npm i webpack-dev-server

使用方式就是在package.json文件里添加：

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --config webpack.config.js"
  }

2、安装 cross-env

npm i cross-env

我们如果不想区分不同系统，写一套代码来适应多个系统，我们这里就使用到了 cross-env，我们在指令前面添加cross-env。们、在package.json文件里build指令后面添加代码。

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

因为我们需要区分环境，所以接下来我们需要区分全局的一个环境，很容易就想到需设置一个全局的环境变量来做区分控制。在webpack.config.js中设置全局变量。

const isDev = process.env.NODE_ENV === 'development';//环境区分

如果是dev环境的话，我们就给webpack.config.js添加一些配置。

if(isDev){
  config.devServer = {
    port: 8000,
    host: '0.0.0.0',
    overlay: {
      erros: true,
    }
  }
}

首先我们给devServer属性添加一个port，因为我们新建的是一个服务，所以肯定要一个端口，接下来我们配置host，这里使用‘0.0.0.0’也是有好处的。这样可以通过127.0.0.1（本地默认地址）来进行访问，同时还可以在别人的机器上来访问，因为如果设置成‘localhost’的话通过ip是不能访问的。
overlay属性是在我们编译的过程中能够让任何的错误都显示到网页上面。
3、安装html-webpack-plugin

npm i html-webpack-plugin

基础的配置之后，我们好像配置的只是js、css、img文件，没有html页面去容纳它们。这个时候我们用到一个webpack的一个插件html-webpack-plugin,我们照样来安装一下它：

并且在webpack.config.js文件的头部将它require进来，同时在plugin中新建。

const HTMLPlugin = require('html-webpack-plugin');

plugins: [
    // make sure to include the plugin for the magic
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"'
      }
    }),
    new VueLoaderPlugin(),
    new HTMLPlugin()
],

最后这里我们用到了webpack，所以需要将 webpack 这个变量引用进来。

const webpack = require('webpack');

好，这部分代码有什么用呢？
第一，在使用了这个plugin之后我们可以在编译的过程以及我们开发的过程中通过process.env来调用NODE_ENV来进行判断；第二，我们在不同的环境下来区分打包，在开发环境我们更多提高了开发效率，使用了很多错误提示等一些工具，但是生产环境没必要去用，一方面会增加文件的大小，另一方面会降低代码的运行效率，所以我们需要根据不同的环境，编译执行的动作也不一样，就需要利用这个来判断，说句高端一点，就是将环境变量进行选择性替换；第三，我们注意到这里使用的单引号里接双引号的方式，这里是由于webpack在转移我们代码的时候，如果不写双引号，会是这样：

process.env.NODE_ENV = development,我们知道这其实是将development赋值给它。
七、运行
npm run dev
webpack项目工程使用简单的开发环境的配置就搭建好了。