如何使用webpack打包vue项目?
每次遇到问题,总是去网上这里找找资料那里找找资料,解决问题之后也不会去归纳总结,以至于几个月后再次碰到相同的问题,或许已忘得差不多了,总要重新寻找资料,难免有些凌乱和浪费时间,所以决定撰写博客,主要是为了记录自己的学习成果,清晰自己解决问题的过程,同时也给遇到同样问题的人一些参考建议,希望大家可以一起讨论学习,一起进步。如何使用webpack打包vue项目?1、安装nodejs:使用web
·
每次遇到问题,总是去网上这里找找资料那里找找资料,解决问题之后也不会去归纳总结,以至于几个月后再次碰到相同的问题,或许已忘得差不多了,总要重新寻找资料,难免有些凌乱和浪费时间,所以决定撰写博客,主要是为了记录自己的学习成果,清晰自己解决问题的过程,同时也给遇到同样问题的人一些参考建议,希望大家可以一起讨论学习,一起进步。
如何使用webpack打包vue项目?
1、安装nodejs:使用webpack打包需要用到npm,npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等),所以需要先下载安装nodejs,安装完成后使用npm -v查看是否安装完成;
2、安装cnpm(此步骤为非必须):因为npm安装插件是从国外的网站上下载的,由于网络影响,很容易就出现异常,cnpm是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。 使用npm install -g cnpm --registry=https://registry.npm.taobao.org安装,之后可以使用cnpm来代替npm;
3、全局安装vue-cli脚手架,npm install -g vue-cli (不加-g安装到当前目录;加-g安装到系统的node目录),安装完成后使用vue -V查看;
4、创建一个基于webpack模板的新项目(下载模板);使用 vue init webpack my-project(项目文件夹名);接下来进行一系列的设置后,就下载好了一个vue模板了;
5、cd my-project 进入项目文件夹;使用npm install命令安装package.json文件里的依赖,会根据前端项目的依赖关系下载好相关的组件,存在项目目录的node_modules文件夹下;
6、安装node_modules依赖后,使用命令 npm run dev 启动项目(dev配置在package.json文件中)。
更多推荐
已为社区贡献2条内容
所有评论(0)