手动配置一个vue项目小案例
2019-08-29 本文已影响0人
呦释原点
前言
之前使用vue-cli能成功搭建vue项目环境， 对立面的内容理解的不是很清楚，现在手动搭建一个基础项目
使用vue-cli初始化项目参考中的项目初始化
注1： node wbpack环境自行安装 可参考
注2： 部分代码含义已在注释中说明
创建文件目录
目录
- VDemo主目录，所有的练习项目都放在这里了
- node_modules， 放在了外面，因为练习，其他项目公用这一个
- src 放源码
- dist 打包生产的文件
1 安装需要的插件和依赖
- vue
- vue-loader
- vue-template-compiler
- babel-loader
- babel-core
- babel-preset-es2015
- babel-plugin-transform-runtime
- style-loader
- css-loader
- url-loader
- html-webpack-plugin 此插件用于运行项目后再dist文件生成编译后的*.html文件
例如：
npm init -y 初始化package.json文件
sudo npm install vue
2 创建index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个vue程序启动</title>
</head>
<body>
<!--vue单文件方式， 就是以*.vue结尾的文件， 最终通过webpack编译成*.js文件在浏览器运行-->
<!--webpack需要找人来理解单文件代码， vue-loader,vue-template-compiler,代码中依赖vue-->
<!--1. 在index.html中写上 <div id="app"></div> app可以随意起名-->
<!--此处内容是一个坑，未来vue编译好的代码往里面插入-->
<div id="app"></div>
</body>
</html>
3. 创建main.js
// 2.引入 vue
import Vue from 'vue';
// 引入一个模块的内容 模块内容是
import App from './app.vue';
// 3. 创建Vue实例， 一般一个项目， 大多一个vue实例
new Vue({
el:'#app', // 此处app对应第一步中的id app
render:function (creater) { // creater是一个形参， 是一个内部方法 将App中包含的内容（template/script/style）生成DOM结构
return creater(App); // render方法返回creater函数的返回值， 放在#app中
}
})
4. 创建一个模块App
<!--一个vue模块， 模块中的内容应该是<template></template>+<script></script>+<style></style>三种-->
<template>
<!--template只能包含一个根节点-->
<div>Hello World</div>
</template>
<script>
</script>
<style scoped>
</style>
<!--添加scoped 后该style样式只对本文件生效-->
5. 创建webpack.config.js文件 webpack配置文件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 使用此插件在dist下生产index.html我文件，为vue编译后的文件
const path = require('path');
module.exports = {
entry:{ //main是默认入口,也可以是多入口
main:'./src/main.js'
},
//出口
output:{
filename:'./build.js', //指定js文件
path: path.join(__dirname,'dist') //最好是绝对路径
//代表当前目录的上一级的dist
},
module:{
//一样的功能rules: webpack2.x之后新加的
rules:[ //require('./a.css||./a.js')
{test:/\.css$/,
loader:'style-loader!css-loader',
//顺序是反过来的2!1
},
{
test:/\.(jpg|svg|png|gif)$/,
loader:'url-loader?limit=4096&name=[name].[ext]',
//顺序是反过来的2!1
//[name].[ext]内置提供的，因为本身是先读这个文件
// options:{
// limit:4096,
// name:'[name].[ext]'
// }
},{//处理ES6的js
test:/\.js$/,
loader:'babel-loader',
//排除 node_modules下的所有
exclude:/node_modules/,
options:{
presets:['es2015'],//关键字
plugins:['transform-runtime'],//函数
}
},{//解析vue
test:/\.vue$/,
loader:'vue-loader',//vue-template-compiler是代码上的依赖
}
],
},
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template:'./src/index.html',
})
],
}
6. 在终端执行webpack命令
终端
执行命令后如果出现错误可自行查看终端错误提示解决（为运行成功出现了很多问题）
其中Hash:fe7807b92227aa241978 是本次执行的标识
执行完后会在dist文件中生成编译后的index.html文件， 直接在浏览器中打开
结果
7. 安装 webpack-cli 自动执行项目
sudo npm i -D webpack-cli
一开始安装的
sudo npm install webpack-dev-server执行../node_modules/.bin/webpack-dev-server --inline --hot --open后报错
The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
错误提示很明显 webpack-dev-server 次开发环境服务已经移到webpack-cli中， 直接安装webpack-cli即可。 我试试按旧版操作的，出现很多问题也就不奇怪了
在终端执行../node_modules/.bin/webpack-dev-server --inline --hot --open命令自动运行项目
因为我的项目和node_modules在同一级目录所以添加了../
终端展示
bogon:day01 Mac$
bogon:day01 Mac$
bogon:day01 mac$ ../node_modules/.bin/webpack-dev-server --inline --hot --open
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/mac/Desktop/web学习/VDemo/day01
ℹ ｢wdm｣: wait until bundle finished: /
ℹ ｢wdm｣: Hash: b8059fdec0c54b016033
Version: webpack 4.35.2
Time: 1934ms
Built at: 08/29/2019 12:46:06 PM
Asset Size Chunks Chunk Names
./build.js 656 KiB main [emitted] main
index.html 448 bytes [emitted]
Entrypoint main = ./build.js
[0] multi ../node_modules/webpack-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/main.js 52 bytes {main} [built]
[../../../../node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[../../../../node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {main} [built]
[../../../../node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[../../../../node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
[../../../../node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.34 KiB {main} [built]
[../node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[../node_modules/vue/dist/vue.runtime.esm.js] 222 KiB {main} [built]
[../node_modules/webpack-dev-server/client/index.js?http://localhost:8080] ../node_modules/webpack-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[../node_modules/webpack-dev-server/client/overlay.js] 3.51 KiB {main} [built]
[../node_modules/webpack-dev-server/client/socket.js] 1.53 KiB {main} [built]
[../node_modules/webpack-dev-server/client/utils/createSocketUrl.js] 2.85 KiB {main} [built]
[../node_modules/webpack-dev-server/client/utils/log.js] 964 bytes {main} [built]
[../node_modules/webpack-dev-server/client/utils/reloadApp.js] 1.59 KiB {main} [built]
[./src/main.js] 583 bytes {main} [built]
+ 31 hidden modules
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[../../../../node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[../../../../node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
[../node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 606 bytes {0} [built]
[../node_modules/lodash/lodash.js] 528 KiB {0} [built]
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...
ℹ ｢wdm｣: Hash: 5f691fc7e2db2405fee2
Version: webpack 4.35.2
Time: 97ms
Built at: 08/29/2019 12:54:23 PM
Asset Size Chunks Chunk Names
./build.js 656 KiB main [emitted] main
735862314b614f94da0b.hot-update.json 44 bytes [emitted]
b8059fdec0c54b016033.hot-update.json 46 bytes [emitted]
index.html 448 bytes [emitted]
main.b8059fdec0c54b016033.hot-update.js 1.59 KiB main [emitted] main
Entrypoint main = ./build.js main.b8059fdec0c54b016033.hot-update.js
[../node_modules/babel-loader/lib/index.js?!../node_modules/vue-loader/lib/index.js?!./src/app.vue?vue&type=script&lang=js&] ../node_modules/babel-loader/lib??ref--2!../node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=script&lang=js& 34 bytes {main} [built]
[../node_modules/vue-loader/lib/loaders/templateLoader.js?!../node_modules/vue-loader/lib/index.js?!./src/app.vue?vue&type=template&id=5ef48958&scoped=true&] ../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=template&id=5ef48958&scoped=true& 240 bytes {main} [built]
[./src/app.vue] 1.06 KiB {main} [built]
+ 43 hidden modules
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
735862314b614f94da0b.hot-update.json 44 bytes [emitted]
+ 1 hidden asset
Entrypoint undefined = index.html
4 modules
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...
ℹ ｢wdm｣: Hash: 3e3ea0b91c60b2b9cc59
Version: webpack 4.35.2
Time: 99ms
Built at: 08/29/2019 12:54:42 PM
Asset Size Chunks Chunk Names
./build.js 656 KiB main [emitted] main
3d5ed972804dc101f339.hot-update.json 44 bytes [emitted]
5f691fc7e2db2405fee2.hot-update.json 35 bytes [emitted]
index.html 448 bytes [emitted]
Entrypoint main = ./build.js
[../node_modules/babel-loader/lib/index.js?!../node_modules/vue-loader/lib/index.js?!./src/app.vue?vue&type=script&lang=js&] ../node_modules/babel-loader/lib??ref--2!../node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=script&lang=js& 34 bytes {main} [built]
[../node_modules/vue-loader/lib/loaders/templateLoader.js?!../node_modules/vue-loader/lib/index.js?!./src/app.vue?vue&type=template&id=5ef48958&scoped=true&] ../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=template&id=5ef48958&scoped=true& 240 bytes {main} [built]
[./src/app.vue] 1.06 KiB {main} [built]
+ 43 hidden modules
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
3d5ed972804dc101f339.hot-update.json 44 bytes [emitted]
+ 1 hidden asset
Entrypoint undefined = index.html
4 modules
ℹ ｢wdm｣: Compiled successfully.
8.配置package.json文件， 精简命令
在接手新项目时首先需要查看package.json文件 看看有都少命令
image.png
文件内容
{
"scripts":{
"dev":"../node_modules/.bin/webpack-dev-server --inline --hot --open",
"build":"webpack"
}
}
然后执行webpack.json中的dev命令npm run dev相当于../node_modules/.bin/webpack-dev-server --inline --hot --open 即可运行项目
执行npm run build 即可打包项目， 生成dist文件
- 指定端口 添加--port 端口号
- 指定浏览器打开 --open 'google chrome' 不指定就是默认浏览器打开
{
"scripts":{
"dev":"../node_modules/.bin/webpack-dev-server --inline --hot --open 'google chrome' --port 5566",
"build":"webpack"
}
}
