vue+webpack的快速使用指南(新手向)

樊能
• 阅读 20859

一、vue有两种使用方式:

1.下载vue.js

<script src="vue.js"></script>

2.使用npm

npm install vue

二、在vue的mvc思想基础上,会有很多想实现的功能,可以不必原生写。比如ajax请求,各种插件。

安装vue-cli,促使这些插件可以在vue上运行。

npm install vue-cli -g

三、vue安装成功测试

cmd 中,(vue各种模板)

vue -V

vue list 

四、使用vue,结合webpack开发。

从vue的角度讲,使用了模块化编写代码。

从webpack的角度讲,编译后的代码,页面全是js写的,别人看不懂,也压缩了文件大小。

五、vue+webpack简单流程操作

1、文件夹中、shift+右键,选择“在此处打开命令窗口”

vue init webpack test

test是项目名字

2、
 vue+webpack的快速使用指南(新手向)

1.项目名字,
2.项目描述,
3.项目作者,
4.使用vue什么模式,
5.是否安装vue路由,
6.是否使用eslint检查代码(建议no,严格要求es6编码),
7.不知道,
8.不知道,

3、进入项目文件夹,shift+右键,选择“在此处打开命令窗口”

npm install

此步骤就是安装package.json中预设,要装的插件。

4、
 vue+webpack的快速使用指南(新手向)

1.build,vue能进行模块化编写,就靠它配置文件
2.config,webpack能打包,就靠它配置文件
3.dist,这个是打包后才出现的文件夹。里面装的就是打包后的项目文件
4.node_modules,安装vue各种插件的地方
5.src,项目编写的地方 assets,装资源的地方,图片,字体等

components,装模块,或者网页的地方。文件均为**.vue

router,配置路由,哪个地址,分配component下的哪个网页

App.vue,本身就是个components挂在外面的index.html上。index相当于投资人,甩手掌柜,App.vue相当于职业经理人,网页的事它主管。

main.js,和主管App.vue配套的,主管js。

6.static,有它可以使用git项目版本管理
7.index.html,vue网页入口
8.package.json ,内置初始插件名称。后期再安装插件,npm i 插件名 --save ,可以保存进文件内

5、.vue可以看成是.html,都有标签代码区域,js区域,css样式区域。

又不同于.html,作用域都是独立的。所以js引用必须import导入,export导出。

6、运行项目
项目文件中,shift+右键,选择“在此处打开命令窗口”

npm run dev 
npm run build 
npm start

dev就是webpack的开发模式,开发模式,就是压缩文件之前
build就是项目完成后开始压缩文件,文件夹中出现dist文件夹,里面就是压缩后的项目
进入dist文件夹,shift+右键,选择“在此处打开命令窗口” (运行项目)

完结~然后就可以开始专注于代码的编写~
空缺错误之处,欢迎指导~

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Peter20 Peter20
4年前
mysql中like用法
like的通配符有两种%(百分号):代表零个、一个或者多个字符。\(下划线):代表一个数字或者字符。1\.name以"李"开头wherenamelike'李%'2\.name中包含"云",“云”可以在任何位置wherenamelike'%云%'3\.第二个和第三个字符是0的值wheresalarylike'\00%'4\
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
暗箭伤人 暗箭伤人
1年前
【www.ithunter.club】 20230922下午
不容易的2023年,我们一起努力【www.ithunter.club】(2023092208:00:00.8872062023092216:00:00.887206)1.人事招聘专员数名(可选远程或入职)2.招聘向坐标东京Yahoo、Shift、L
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
樊能
樊能
Lv1
近乡情更怯,不敢问来人。
文章
3
粉丝
0
获赞
0