Vue工程化开发(脚手架环境)(上)

简介: Vue工程化开发(脚手架环境)(上)

工程化开发(脚手架环境)


工程化,也可以称之为脚手架环境。


1、组件


组件 (Component)是 Vue.js 最强大的功能之一,**组件是一个自定义HTML元素(标签)**或称为一个模块,包括所需的模板(HTML)、逻辑(JavaScript)和样式(CSS)。


组件化开发的特点:

  • 标准
  • 分治
  • 重用
  • 组合

组件也是有全局(component)局部(components)之分。


2、单文件组件 single file component SFC


在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好,在这些项目里 JS 只被用来加强特定的视图。但当在更复杂的项目中,或者你的前端完全由JS驱动的时候,下面这些缺点将变得非常明显:


所有的组件都放同一个html文件中

没有构建步骤(build操作),不能使用npm来管理项目

缺乏语法高亮和提示

没有针对单个组件的css样式支持


针对于上述的问题,vue框架发布了vue-cli项目生成工具,Vue-cli是一个基于 Vue.js 进行快速开发的完整系统, 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。

31910abde988bafbbeb2f0d9c5907baf.png

单文件组件的要求:


后缀必须是“.vue”

需要使用三个标签将整个文件分成3部分

template标签:包裹的是html部分(视图部分)【必须要有的】

script标签:包裹的是JavaScript部分(逻辑部分)【必须要有的】

css-in-js:在JavaScript中写样式

style标签:包裹的css/scss/less等样式部分(样式部分)【可以没有】

样式存在范围的问题的

有“scoped”属性则表示该组件的样式代码只在当前组件生效

如果没有“scoped”属性则表示该组件的样式会影响自己及后代,一般在工程化开发的模式中,只有根组件“App.vue”不写“scoped”属性(全局样式)

其他的语法与之前的一致

单文件组件只是工程化中的一个文件,无法单独运行,必须在项目中运行


3、工具安装


网址:http://npmjs.com

## 安装
# -g:全局安装
npm i -g @vue/cli
## 安装成功后,检查
vue --version
vue -V
#  Vue和VueCLI是两回事
## 卸载(了解)
npm uninstall -g @vue/cli


ecc217b531a18cadd2e14de2a903a4f3.png

如果需要安装其他版本,可以使用npm install -g @vue/cli@版本号的方式进行指定版本。


如果最新版安装不成功,可以尝试以下几种方式去解决:

  • 断网,使用热点共享流量去执行安装命令
  • 安装其他版本
  • 切换一下npm镜像源,切换成taobao
  • 卸载nodejs重安装
  • 重装系统/换电脑

vue/cli ≠ vue,切勿将版本搞混


4、创建项目


脚手架创建初始项目的方式有2种:

  • 通过UI界面方式去创建(了解)
  • 在命令行中输入以下命令启动UI界面:
vue ui


通过命令行的方式切创建(推荐)

  • 执行命令:
vue create 项目名  


# 首先需要进入到对应的目录中(英文目录不要有空格及中文),执行如下命令
# 如果当前你的终端工作路径带有中文或者空格,你可以使用`cd 路径`形式进行路径切换,切换到符合要求的路径中
vue create 项目名称(创建时会自己以对应的项目名称生成目录)
## 例
vue create myproject
# 上述命令中,可以允许变的就是`myproject`部分


5、目录结构介绍


public:不需要去改动现有的文件,里面存放的是浏览器访问的入口文件(index.html)


src(后期很多操作都在这个目录中完成)


main.js:项目/程序入口文件 (该文件中JavaScript代码都会被执行)

App.vue:根组件(万物之根)

components:存放自定义的功能组件(涉及到业务逻辑)

assets:静态资源目录(图片、视频、音频等就是静态资源),这里面的静态资源浏览器是无法直接访问的,而是给组件通过模块化的方式导入进组件使用的。

项目中的静态资源有2个地方可以放

public:供在public/index.html中直接引入(link标签、script标签)的

src/assets:供单文件组件导入时需要的静态资源文件(import …)

views:(当前是没有的,但是后期要用)存放视图组件的(只是涉及到页面的布局排版)

如何很好的划分功能组件与视图组件呢?


小技巧:可以被复用的就算它功能组件,不能被复用的就算它是视图组件。


补充:(readme.md文件中的内容)后续入职的时候项目给到的代码可能不不包含node_modules目录,需要自己执行npm i,随后项目才完整。


6、项目的运行及注意事项


6.1、项目的启停

e5713173dc7c4d4026254e4ee74d9424.png

如上图所示,在创建项目完成后有提示我们后续的操作:

  • 在命令行中进入项目目录
  • 运行npm run serve命令来启动项目

按照上述命令执行后,我们会见到如下的效果,即表示项目运行成功:

a4da4942d5e97368bb1aabc89205d93f.png

注意:默认端口号会从8080开始,如果再次启动其他项目后续会以8081、8082……进行监听。

如果需要停止正在运行的项目,可以选择以下两种方式任一:

  • 关闭终端
  • 在终端中按下组合键Ctrl + C(Cancel),随后选择Y并键入回车(如下图)
  • 也可以按下两次Ctrl + C

78b6383ef880c84c413a3ad7db6efb98.png

部分同学的机器在启动vue项目的时候可能会出现卡在“40%”的进度并且长时间不动,如果这样,则直接Ctrl + C停止本次启动,重新再去尝试启动。

关于项目运行时,如果修改了项目代码是否需要重启的说明:

是否需要重启取决于我们修改了什么内容,如果只是修改了代码部分(js、css、vue文件等)是不需要开发者手动重启项目的,系统会自动重新编译(有点nodemon感觉);但是如果修改的是配置文件,则必须需要自己先去停止项目,然后再去启动项目(手动实现重启)。


6.2、关于ESlint


ESlint用于规范项目的编码,大型项目一般多人开发,为了避免一些个人编程恶习坑自己坑别人,项目中使用了ESlint会起到紧箍咒的作用,强制开发人员注意代码规范。例如,在不使用ESlint的情况下,JS允许我们声明一个不变量但不使用。如果使用了ESlint,在上述情况下会报错如下:

d3126b61370b5ddfa00c2700e0047f32.png

关于ESlint的报错,有一份错误参照,可以访问以下地址查看:https://cn.eslint.org/docs/rules/


在前期学习阶段不建议去使用ESlint,所以待会会重新创建一个不带有eslint的项目来学习路由的使用。但是,以后企业中开发项目的时候都会启用eslint。

实际使用中可以通过npm run lint来解决eslint所爆出的大部分错误(例如:分号、引号、空格、多余换行等等),但是涉及到代码多余或者缺少表达式之类的错误需要开发者自己解决的。

目录
相关文章
|
18小时前
|
存储 JavaScript 前端开发
vue尚品汇商城项目-day05【30.登录与注册静态组件(处理公共图片资源问题)+31.注册的业务+登录业务】
vue尚品汇商城项目-day05【30.登录与注册静态组件(处理公共图片资源问题)+31.注册的业务+登录业务】
8 1
|
18小时前
|
存储 JavaScript API
vue尚品汇商城项目-day05【33.token令牌理解+34.用户登录携带token获取用户信息+35.退出登录】
vue尚品汇商城项目-day05【33.token令牌理解+34.用户登录携带token获取用户信息+35.退出登录】
7 0
|
18小时前
|
JavaScript API 数据安全/隐私保护
vue尚品汇商城项目-day05【36.导航守卫理解】
vue尚品汇商城项目-day05【36.导航守卫理解】
7 0
|
18小时前
|
JavaScript API
vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
6 0
|
9天前
|
JavaScript
vue组件中的插槽
本文介绍了Vue中组件的插槽使用,包括单个插槽和多个具名插槽的定义及在父组件中的使用方法,展示了如何通过插槽将父组件的内容插入到子组件的指定位置。
|
8天前
|
JavaScript
vue消息订阅与发布
vue消息订阅与发布
|
4天前
|
JavaScript
理解 Vue 的 setup 应用程序钩子
【10月更文挑战第3天】`setup` 函数是 Vue 3 中的新组件选项,在组件创建前调用,作为初始化逻辑的入口。它接收 `props` 和 `context` 两个参数,内部定义的变量和函数需通过 `return` 暴露给模板。`props` 包含父组件传入的属性,`context` 包含组件上下文信息。`setup` 可替代 `beforeCreate` 和 `created` 钩子,并提供类似 `data`、`computed` 和 `methods` 的功能,支持逻辑复用和 TypeScript 类型定义。
26 11
|
8天前
|
JavaScript 前端开发 IDE
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
|
8天前
|
JavaScript 前端开发 API
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
|
7天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
17 4
下一篇
无影云桌面