一、初始化项目
首先，进入到项目目录
然后用npm初始化项目
npm init
package name: (todo) todolist
version: (1.0.0)
description: demo
git repository:
keywords:
author: doctor
license: (ISC)
然后会让输入一些信息，这里我只写了文件名和作者
然后会打出第一段配置
{
"name": "todolist",
"version": "1.0.0",
"description": "demo",
"main": "vue.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "doctor",
"license": "ISC",
"dependencies": {
"vue": "^2.5.13",
"webpack": "^3.11.0",
"vue-loader": "^14.1.1",
"css-loader": "^0.28.9",
"vue-template-compiler": "^2.5.13"
},
"devDependencies": {}
}
Is this ok? (yes)
我们输入yes 点回车就OK了
目录下就生成了一个package.json文件
内容就是我们输出的那些
二、安装webpack和vue
一开始我们安装3个资源
1.webpack
2.vue
3.vue-loader
npm install webpack vue vue-loader （全局安装了webpack可省掉webpack）
等待安装完成
我们发现目录里面多了一些东西
图片.png
我们的package.json也多了一些内容
就是dependencies。我们项目的依赖
"dependencies": {
"vue": "^2.5.13",
"vue-loader": "^14.1.1",
"webpack": "^4.0.0"
}
另外，控制台还输出可一些东西
npm WARN vue-loader@14.1.1 requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself.
npm WARN vue-loader@14.1.1 requires a peer of vue-template-compiler@^2.0.0 but none is installed. You must install peer dependencies yourself.
我们少了两个依赖 css-loader，vue-template-compiler
于是我们需要继续下载
npm install css-loader vue-template-compiler
报错权限不够，请用管理员再次运行该命令
于是我直接又运行了一次，OK了
三、访问vue文件
1.在目录下建一个src,再在src下新建一个app.vue
在app.vue里面简单的写一些内容
<template>
<div id="test">{{text}}</div>
</template>
<script>
export default {
data(){
return {
text:'hello webpack!'
}
}
}
</script>
<style>
#text{
color: #999;
}
</style>
但是网页是无法识别 .vue后缀的文件的
都是打包之后才能访问的
我们继续在src下新建一个 index.js文件
通过index.js来加载app.vue里面的内容
import Vue from 'vue'
import App from './app.vue'
//申明一个空div
const root=document.createElement('div');
document.body.appendChild(root);
//把app.vue的内容挂载到空div上
new Vue({
render:(h) =>h(App)
}).$mount(root);
在更目录下新建一个 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:[
{//让webpack识别vue模板
test:/.vue$/,
loader:'vue-loader'
}
]
}
}
这个配置并没有使用，也就是说还没被引用
我们要去package.json把webpack.config.js引用进去
在script下面的test后面加入一行 build
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack --config webpack.config.js"
}
然后在控制台输入
npm run build 就会生成一个dist目录，在里面有一个bundlle.js
图片.png
1
刚刚被坑了，全局下载了webpack，环境里面装了个局部的webpack
导致npm run build 报错
而且全局的webpack是3.11版本，局部下载的居然是4.0.0
