vue.js+webpack构建项目

在使用webpack+vue.js构建项目之前,首先得全局安装node,必须在node环境下构建。

1.创建一个基于webpack的项目

创建一个文件夹(如:vuell),使用 (vue init webpack +文件夹名) 命令创建项目目录。

vue init webpack vuell

接下来有几个选项需要选择,这根据项目开发的需求选择是否安装,如下图,可以直接按enter


6DC7D6FD811130CFBEE44D9E938C0DE7.png

创建基于webpack的目录创建成功后,文件夹内容如下:


DE15EF9F02B12E40658EF431C676E63D.png

2. 开启服务器

cd 进入文件夹(vuell)运行一下命令开启服务器

 1. cd vuell
 2. npm run dev

终端出现下面的服务器端口时,则配置成功


F66727C3BF85ACD5F191B2CAFB712CB3.png

访问http://localhost:8081/本地服务器:会出现vue的界面

A3B0F9D29E2B61234550FD189456797B.png

这样,基于webpack的vue项目就构建成功了,最后来说一下项目完成时,项目的打包

项目打包

一般写项目都是操作src文件夹,html,css,js,image
等都在这写,项目完成时,使用 npm run build 打包项目,此时会生成一个dist!
文件夹,放的便是打包后的项目。

npm run build
8693837C78C3BB38C5AA10355A727C91.png

end----------------

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容