在前后端分离的当下，作为一个后端同学，有时工作有需要或者自己想做个小项目，难免需要接触到前端技术，作为一个多年后端开发的同学，给大家总结了下如何手动构建vue项目。之所以手动构建是因为对前端技术不熟悉的情况就直接使用vue的脚手架会让自己很难明白自己在干什么，本着学习的精神总结了如下的步骤。

首先安装node环境。这个就不说了，自行搜索很容易就知道了。

接下来是创建项目：

1.创建项目文件夹，如front-end

2.初始化npm项目(执行完成后会生成package.json)

$ cd front-end

$ npm init

3.安装所需要的开发时依赖包(--save-dev表示开发时依赖包，--save表示运行时依赖包；--global表示全局安装，这里不推荐全局安装，因为会将项目锁定定到某版本)

$ npm install --save-dev webpack webpack-cli

4.根目录新建文件夹config，用于存放不同环境的配置文件，添加合并文件的组件

$ npm install --save-dev webpack-merge

5.根目录新建src/index.js；config目录新建三个配置文件webpack.base.config.js(公共配置)、webpack.dev.config.js、webpack.pro.config.js

--其中webpack.base.config.js内容如下：

const Path = require('path');

module.exports={

entry: {

index:'./src/index.js'

},

output:{

filename: '[hash].build.js',

path: Path.resolve(__dirname, '../dist'),

}

};

--webpack.dev.config.js、webpack.pro.config.js如下(dev和pro的区别在mode为development和production)：

const merge = require('webpack-merge');

const common = require('./webpack.base.config.js');

const path = require('path');

module.exports = merge(common, {

mode:'development'

});

--package.json的script添加如下节点，用于编译时指定环境：

"dev": "webpack --mode=development --config ./config/webpack.dev.config.js",

"build": "webpack --mode=production --config ./config/webpack.pro.config.js"

6.这个时候npm run build就会在dist生成打包好的文件，但只有js没有html。在根目录下新建一个index.html，添加标准的html结构，内容如下：

Document

然后引入如下打包html插件：

$ npm install --save-dev html-webpack-plugin

7.webpack.base.config.js引入打包html插件：

头部添加

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

module.exports最后加入如下节点：

plugins:[

new HtmlWebpackPlugin({

template: 'index.html',

filename: 'index.html'

})

]

到此手动构建webpack项目就完成了，运行npm run build就能生成相关html和js。

=================================

但在开发的时候我们每次修改了代码都需要重新编译，这样很费事。

8.使用webpack-dev-server搭建一个简单的web服务器，能够实时重新加载

$ npm install --save-dev webpack-dev-server

然后在package.json的script添加如下节点：

"server": "webpack-dev-server --open --config ./config/webpack.pro.config.js"

9.运行npm run server即可浏览器自动加载页面

=================================

10.接下来我们引入vue

$ npm install vue vue-loader vue-template-compiler

webpack.base.config.js添加如下内容：

头部添加

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports的plugins节点前加入如下节点：

module: {

rules: [{

test: /.vue$/,

use: ['vue-loader']

}]

}

plugins节点加入如下节点:

new VueLoaderPlugin()

----------

src/index.js添加如下内容：

import Vue from 'vue';

import App from './app.vue';

new Vue({

el: "#app",

render: (h) => h(App)

});

----------

新建src/app.vue文件，添加如下内容：

----------

在index.html的body添加内容为空ID为app的div

到此添加vue就完成了。

最后附上package.json的图片：