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

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

2022年11月09日 21:41:20前端技术8

简介:

本篇主要介绍如何通过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
分享给朋友:

“vue入门——通过webpack构建vue项目” 的相关文章

SpringBoot + easyexcel + vue 下载 excel 问题

最近有个下载 excel 的需求,后端导出 excel 我选用了 easyexcel,但是 vue 前端老是下载不了,发现网上写的很多普遍的方法用着不行。查了下发现了可行的方法,这里写下总结。 1. 后端 不知为啥用 Post 请求下载不了,这里改...

前端每日一撸|vue回退(router.back)如何不刷新页面?

解决方案: 使用Navigation 组件解决 安装Navigation npm install vue-navigation 使用方法 在main.js中引用并进行初始化 import...

vue框架中更改body,html页面背景颜色

beforeCreate () { document.querySelector('body').setAttribute('style', 'background-color:#fff') }, beforeDestroy () { document.query...

vue全套教程(实操)

vue全套教程(实操)

  Vue (读音 /vjuː/,类似于 View) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具...

脚手架vue-cli和@vue/cli的搭建及区别

脚手架vue-cli和@vue/cli的搭建及区别

vue-cli与@vue/cli vue脚手架版本目前有2,3,4.不管搭建哪个版本的脚手架,首先都需要安装node. node的安装 node的安装我们可以直接去node官网(http://nodejs.cn/)下载安装,node安装...

Vue中自定义标签及其使用

Vue中自定义标签及其使用

Vue中自定义标签及其使用 问题 需求 自定义 创建组件的vue文件 编辑组件 使用 导入...

vue项目可视化管理之(vue ui)

vue项目可视化管理之(vue ui)

@vue/cli3.0增加一个可视化项目管理工具,全局安装完成cli3.0之后,可以直接在cmd输入命令:vue ui  启动即可,地址默认是localhost:8000 可以通过那牛导入你的vue项目进行管理,也可以通过创建按钮进行可视化创建一个新的vue项目。...

Vue.js——60分钟browserify项目模板快速入门

Vue.js——60分钟browserify项目模板快速入门

概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题。 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直接写在页面中,这对于一些复杂的页面来说,不是好事情,代码的可读性会较差,也...

Vue.config.productionTip的作用

Vue.config.productionTip的作用

Vue.config.productionTip的作用 productionTip 值为 true 与 为 false 时的区别 productionTip = true (默认) productionTip = fasle...

vue

vue

用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) 1...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。