vue教程3-webpack搭建项目
vue-cli
https://cli.vuejs.org/zh/
vue-cli是vue的命令行工具,对于创建项目,安装各种组件,运行项目都极为方便,是在开发vue中的必备工具
vue-cli基于nodejs,所以要先安装nodejs。从nodejs官网下载二进制包,然后把nodejs的bin目录加到系统PATH,这样就由全局的npm命令可以调用了。
1 2 | npm install -g @vue /cli #安装vue-cli |
1 2 3 | npm install -g cnpm --registry=https: //registry .npm.taobao.org cnpm install @vue /cli -g #或者用淘宝源 |
1 2 3 | # vue --version 3.6.2 #安装完后,出现vue命令 |
vue init
搭建项目的第一步就是初始化目录,需要使用init,先安装
1 | cnpm install -g @vue /cli-init |
webpack
webpack是一个模块加载和打包工具,通过使用CommonJS语法把所有浏览器需要的静态资源做相应的准备,比如合并、打包。
它有loader和plugin机制。
loader用于载入各样静态资源,不只是js脚本,还有css-loader,style-loader
plugin对整个流程进行控制。
vue中也有vue-loader,用于把.vue文件转换成webpack包,和整个打包过程融合起来。
如果在本地创建一个简易项目时,一般使用webpack
git地址:https://github.com/vuejs-templates/webpack
使用webpack创建一个名为vue-test的项目
1 2 3 4 5 6 7 8 9 10 11 12 | cnpm install -g @vue /cli-init vue init webpack vue- test cd vue- test / npm run dev #安装init包, #初始化一个环境,取名vue-test,es,unit test,e2e包先不装,其他选项默认 #运行环境,然后就会由node起一个服务 --> DONE Compiled successfully in 4722ms I Your application is running here: http: //localhost :8081 |
webpack-simple项目目录
webpack初始化的项目东西还是不少的,这里初始化一个webpack-simple,这个项目模板十分适合初学。
1 2 3 4 5 6 7 8 9 10 11 | ├─.babelrc // babel配置文件 ├─.gitignore ├─index.html // 主页 ├─package.json // 项目配置文件 ├─README.md ├─webpack.config.js // webpack配置文件 ├─dist // 发布目录 │ ├─.gitkeep ├─src // 开发目录 │ ├─App.vue // App.vue组件 │ ├─main.js // 预编译入口 |
package.json是vue项目的依赖管理文件,运行npm install时,就会安装这里的包
webpack.config.js是编译配置文件,采用了CommonJS的写法,entry节点配置了编译入口,output节点配置了输出
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var path = require( 'path' ) var webpack = require( 'webpack' ) module.exports = { entry: './src/main.js' , output: { path: path.resolve(__dirname, './dist' ), publicPath: '/dist/' , filename: 'build.js' }, ... } #这段entry和output配置的含义是:编译src/main.js文件,然后输出到dist/build.js文件。 #,执行npm run dev命令后,使用开发环境的话,在dist目录下不会生成build.js文件,开发环境下build.js是在运行内存中的 |
1 2 3 4 5 6 | npm run dev #运行开发者环境,不会生成dist/build.js #开发者环境,nodejs会自己起一个web服务 npm run build #运行生产环境,生成dist/build.js和压缩文件build.js.map #生产环境,需要服务器提供nginx这样的http服务 |
webpack项目目录
初始化一个webpack项目模板,目录结构更复杂些。
在simple中,只有一个单一的App.vue,所有功能都在这里面。在webpack中,src目录下有了components目录,布局组件放在其中。
build后,dist目录下,把所有静态资源做了整合。
自动渲染
在dev环境下,webpack会监听src目录下的改动,有改动就会重新渲染
如果改了build和config的内容,则要手动重启node。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步