vue+webpack 项目示例（第一部分）

小咪咪 2022-05-29 12:29 210阅读 0赞

项目没有使用vue-cli创建目录，自己搭建，我们先学会如何创建整个项目；

1.先随便找个地方创建一个文件夹，起个名字吧：vue-webpack ;

使用npm init 先创建一个packge.json ;

![70][]

2. 局部安装webpack（注意，请使用webpack3.0版本，不要用最新的4.0版本），vue ，vue-loader;

![70 1][]

3.第二步的时候出现了warn 警告信息，那么来处理一下，

因为缺少一些东西，所以下载一下css-loader和vue-template-compiler；

![70 2][]

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.全部完成之后目录结构如下：

![70 3][]

9.我们使用命令： npm run build   即可；（注意，下载webpack的时候注意版本，4.0版本的webpack-cli已经分离出去

，我们这里使用3.0.0版本）

10.命令执行之后，目录多出来一个dist 文件夹，里面还有我们的目标文件 bundle.js

![70 4][]

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>

然后浏览器打开这个网页：

![70 5][]

好了，这就是一个最简单的完整的vue+webpack实例了；

[70]: /images/20220529/18cf726f18fe4648a6974da79d3e3de2.png
[70 1]: /images/20220529/61411a2291684f0281c6eb299a3463cb.png
[70 2]: /images/20220529/8cfb4d58bdde4126a83b616110bf08b7.png
[70 3]: /images/20220529/6ce84f257e924cab8d745f36d9aaf062.png
[70 4]: /images/20220529/5f726870d0b946ca86616efa28ae106f.png
[70 5]: /images/20220529/955cd09a2a914d10aeb711266f2237e5.png