项目没有使用vue-cli创建目录，自己搭建，我们先学会如何创建整个项目；
1.先随便找个地方创建一个文件夹，起个名字吧：vue-webpack ;
使用npm init 先创建一个packge.json ;
2. 局部安装webpack（注意，请使用webpack3.0版本，不要用最新的4.0版本），vue ，vue-loader;
3.第二步的时候出现了warn 警告信息，那么来处理一下，
因为缺少一些东西，所以下载一下css-loader和vue-template-compiler；
4.在项目目录下新建src文件夹，在src中新建 app.vue ,app.vue中写入内容：
<
template
>
<div id="myapp">{{
myapp
}}
</
div
>
</
template
>
<
script
>
export
default {
data(){
return{
myapp:
"这是我的第一个vue项目示例"
}
}
}
</
script
>
<
style
>
#myapp
{
font-size:30px; color:green;
}
</
style
>
5.上面的项目是没法直接运行的，我们继续在项目目录vue-webpack下创建：webpack.config.js文件
const
path
=
require(
"path");
module.
exports={
entry:
path.
join(__dirname,
"src/index.js"),
output:{
filename:
"bundle.js",
path:
path.
join(__dirname,
"dist")
},
module:{
rules:[
{
test:
/
.
vue
$
/,
loader:
"vue-loader"
}
]
}
}
6.在 src目录下创建index.js 文件；
import
Vue
from
"vue"
import
App
from
'./app.vue'
const
root
=document.
createElement(
"div");
document.body.
appendChild(root);
new
Vue({
render:(h)
=>
h(
App)
}).
$mount(root);
7.修改我们一开始创建的package.json 文件：增加 “build”：“webpack。。。。省略”（如下）
{
"name":
"vue-webpack",
"version":
"1.0.0",
"description":
"",
"main":
"
\u001b
[A
\u001b
[B",
"scripts": {
"test":
"echo
\"
Error: no test specified
\"
&& exit 1",
"build":
"webpack --config webpack.config.js"
},
"author":
"",
"license":
"ISC",
"dependencies": {
"css-loader":
"^0.28.11",
"vue":
"^2.5.16",
"vue-loader":
"^14.2.1",
"vue-template-compiler":
"^2.5.16",
"webpack":
"^3.0.0"
}
}
8.全部完成之后目录结构如下：
9.我们使用命令： npm run build 即可；（注意，下载webpack的时候注意版本，4.0版本的webpack-cli已经分离出去
，我们这里使用3.0.0版本）
10.命令执行之后，目录多出来一个dist 文件夹，里面还有我们的目标文件 bundle.js
11,接下来我们测试运行一下就可以了，
测试步骤：在dist文件夹下创建index.html文件，引入我们的bundle.js文件：
<!doctype html>
<
html>
<
head>
<
meta
>
<
title
>this is test file
</
title
>
</
head>
<
body>
<
script
src
=
"bundle.js"
>
<
/
script
>
</
body>
</
html>
然后浏览器打开这个网页：
好了，这就是一个最简单的完整的vue+webpack实例了；
438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
