(一)准备开发环境
1. 打开vscode,ctrl+· 切换至命令行。
2.npm init 初始化项目,会生成package.json. 此时项目就拥有装有的node_modules运行环境。
3.安装相应的包 npm i webpack vue vue-loader,并根据提示安装需求的依赖包。如css-loader vue-template-complier
(二)vue无法在浏览器中直接运行,将vue组件挂载到js,然后通过webpack将js、css、图片等所有资源进行打包。
1. 新建vue文件
分为3个部分
2.新建index.js文件挂载vue组件
加载vue组件,该文件还可以加载css等其他组件
3.新建webpack.config.js
这里需要绝对路线
4.由于webpack原生只支持js打包的,超过原生的其他资源,需要在webpack.config.js中进行声明rules
相应的组件没有的话就需要安装如stylus-loader
5.编辑package.json
"build": "webpack --config webpack.config.js"
6.npm run build就会开始打包
打包输出的内容