当前位置:首页 > 前端技术 > vue入门——通过webpack构建vue项目

vue入门——通过webpack构建vue项目

简介:

本篇主要介绍如何通过webpack构建一个简单的vue项目,不涉及vue的安装,如果没有安装vue的话,请先安装vue.

在使用vue的时候,通常有两种方式,一种是在html中引入vue.min.js,利用vue的语法规则进行开发。另一种是通过webpack构建vue工程(不知这样描述是不是准确),本篇将对该方法展开叙述(前提安装了vue):

步骤

1、建立项目路径。首先建立一个项目路径(我的位于D:\Program Files\vueProject),尽量不要放在c盘,打开命令行窗口,将路径切换到工作路径中。

vue入门——通过webpack构建vue项目 _ JavaClub全栈架构师技术笔记

2、输入vue init webpack demo,建立项目。其中demo使我们要建立的项目名称,当脚本执行时,会继续进行确认。如下图,其中的一些乱码我也不知道是什么原因。

vue入门——通过webpack构建vue项目 _ JavaClub全栈架构师技术笔记

接下来就是确认项目描述信息,作者信息,这个根据个人喜好,填写吧。Vue build选择默认的,vue-router选择yes(如果不选择,则无法使用vue的路由功能,有关路由功能的参考vue路由详解,个人觉得这块还是比较重要的)

vue入门——通过webpack构建vue项目 _ JavaClub全栈架构师技术笔记

下面的内容应该是有关js语法检测的内容,直接输入n就可以,暂时用不到。然后按enter,直到开始安装。

vue入门——通过webpack构建vue项目 _ JavaClub全栈架构师技术笔记

出现以下内容,表示已经正确安装。

vue入门——通过webpack构建vue项目 _ JavaClub全栈架构师技术笔记

根据提示信息,切换到demo目录下,然后执行npm run dev。编译并启动我们的项目

vue入门——通过webpack构建vue项目 _ JavaClub全栈架构师技术笔记

vue入门——通过webpack构建vue项目 _ JavaClub全栈架构师技术笔记

在浏览器中输入访问的网址,访问界面表示已经正确配置vue入门——通过webpack构建vue项目 _ JavaClub全栈架构师技术笔记

至此,项目已经成功构建,在下一篇内容中,我们将对生成的文件进行简单的说明。

作者:ONLY&YOU
来源链接:https://blog.csdn.net/qq_34182808/article/details/86650967

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/69136.html

标签: vue
分享给朋友: