React js，Angular js，Vue.js是现在前端流行的三大框架，亲手搭建一个vue的项目需要哪些流程呢？
大部分人都是直接使用vue-cli去创建一个Vue的项目，这样会很简单。为了了解webpack的相关插件和在什么情况下使用这些插件或者配置想必大家都没有怎么自己搭建vue，自己尝试搭建了一下，自己记录一下。
首先我们电脑需要安装node js，需要使用npm安装先关的包。
第一步：创建一个文件夹(进入相应的盘符（windows）或者/usr/projects(linux))
mkdir vue-init
2.安装node js 可以参照我之前写的文章，地址：https://blog.csdn.net/qian1314520hu/article/details/84564210
3.进入创建的目录 执行npm init -y 初始化
4.安装webpack，npm install webpack webpack-cli --save-dev
5.在src文件目录下创建webpack的配置文件，webpack.config.js,目录如下：
dist：是我编译之后的放文件的目录
src:项目的源代码
node_modules：npm安装的包都在里面
index.html:主页html
package.json：npm安装的依赖
webpack.config.js：webpack的配置文件
6.安装vue相关的组件
npm install vue-loader vue-template-compiler //编译模板和vue文件加载的
npm install vue --save-dev
7.我们编译的时候需要将html文件也编译，因此需要安装webpackhtml的插件
npm install html-webpack-plugin --save-dev
8.我们需要加载相关的js,css,sass,less等样式文件，因此也需要相关的插件
npm install babel-core babel-loader --save-dev
npm install style-loader css-loader --save-dev
npm install less-loader --save-dev
npm install sass-loader --save-dev
9.我们还需要我们修改文件的时候自动更改运行html的文件
npm install webpack-dev-server --save-dev
10. 还有时候我们需要加载图片和文件，因此还要安装相关的插件
npm install file-loader url-loader --save-dev
以上我们的插件都安装完了，我们进行webpack的相关配置
上面还有一个插件，clean-webpack-plugin，这个插件是将编译的文件删除重新生成，这样添加了每次只会生成最新的文件
我们编辑index.html文件，如下：
<!DOCTYPE html>
<html>
<head>
<title>Vue Webpack</title>
</head>
<body>
<div id="app">
</div>
</body>
<script src="./src/app.js"></script>
</html>
在src中创建app.js,并且创建vue的相关模板
app.vue文件中代码如下：
之后我们就可以运行了，在package.json中添加相应的脚本：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"server": "webpack-dev-server --open"
},
运行build之后，npm run build
运行server，自动运行
npm run server
运行如下：
基础的配置差不多了，还有相关的功能还在挖掘，后期再补充。旁边有报错信息，是因为webpack和webpack-dev-server的版本不一致导致的。
544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
