Vue组件化开发--脚手架的安装使用、目录结构说明
一、Vue的单文件开发模式
1.1 目前Vue的开发模式
虽然学习Vue
基础的时候,可以在html
文件,或者jsp
文件中使用Vue
。
但是随着项目越来越复杂,通常会采用组件化的方式来进行开发。
但是使用html
或者jsp
文文件进行组件化开发会存在很多问题:
各组件维护困难,逻辑多了以后代码看起来混乱
在一个
js
的全局作用域下,很容易出现变量命名或者css
命名冲突的问题。为了适配一些浏览器,要使用
ES5
的语法。代码编写完成后,需要通过工具对代码进行构建、打包。
因此真实开发中,会通过一个后缀名为 .vue
的single-file components
(单文件组件) 来解决上述问题。
再使用webpack
或者vite
或者rollup
等构建工具来对其进行处理。
1.2 Vue
单文件组件开发的特点
代码的高亮
拥有
ES6
、CommonJS
的模块化能力拥有
CSS
组件作用域的能力,能够解决大量代码时的样式名称冲突的问题可以使用多种预处理器来构建组件,比如
TypeScript
、Babel
、Less
、Sass
等
1.3 如何支持单文件组件开发
如果我们想要使用.vue
文件,常见的是两种方式:
使用
Vue CLI
来创建项目,项目会默认帮助我们配置好所有的配置选项,可以在其中直接使用.vue
文件自己使用
webpack
或rollup
或vite
这类打包工具,对其进行打包处理
显然自己搭建项目的话,会比较复杂,并且可能很长时间才需要搭建一次,也没法保持手感。
所以无论是自己做项目,还是在公司进行开发,通常都会采用Vue CLI
(Vue
脚手架)的方式来完成。
1.4 插件推荐
如果使用VsCode
开发,可以选择下面插件中的其中之一进行安装,让Vocode
对.vue
文件的开发有更好的支持。
Vetur
,个人推荐的插件,有更丰富一些的支持;Volar
,官方推荐的插件;
二、Vue脚手架的概念
脚手架其实是建筑工程中的一个概念,在软件工程中也会将一些帮助我们搭建项目的工具称之为脚手架;
在真实开发中,通常会使用脚手架来创建一个项目,Vue
的项目所使用的就是Vue
的脚手架;
Vue
的脚手架就是Vue CLI
:
CLI
是Command-Line Interface
,命令行界面的意思使用
Vue CLI
创建项目时,可以通过CLI
选择项目的配置和创建出我们的项目Vue CLI
内置了webpack
相关的配置,我们无需从零配置开始配置项目
三、Vue脚手架的安装
3.1 全局安装Vue
脚手架
npm install @vue/cli -g
因为以后Vue
脚手架需要在任何位置使用,所以使用全局安装。
3.2 查看脚手架版本
vue -V
# 或者
vue --version
3.3 升级Vue
脚手架
npm update @vue/cli -g
四、使用Vue脚手架创建项目
4.1 创建项目命令
vue create 项目的名称
项目名称中不可以有大写字母和中文。
4.2 选择项目预设
Please pick a preset
就是选择预设的意思。
其实就是选择创建Vue2
还是Vue3
项目。两个预设中都会自带babel
和eslint
。
这里还有一个Manually select features
,意思就是手动选择特性,而不使用预设模板。
如果选择这两个预设模板的话,就会一路到低,直接创建好项目。
所以这里选择第三个,手动选择项目特性,会更加灵活一些。
4.3 选择Manually select features
选择这个以后,按回车。就能显示可以选择的特性列表了。
在这个命令行中,把光标上下移动到想套添加的特性上,按空格键选择想要的特性。
特性前面的括号中如果有个(*)号,代表是已选择的特性。
选择好自己想要的特性后,按回车进入下一步。
特性解释:
Babel
:是否添加Babel
这种js
转换器TypeScript
:是否需要支持TypeScript
Progressive web App (PWA) SupportRouter
:是否需要支持pwa
(这个用的比较少,了解即可)Vuex
:是否默认添加Vuex
状态管理仓库css Pre-processors
:是否选择CSS
预处理器,less
、sass
等Linter / Formatter
:是否选择ESLint
对代码进行格式化限制Unit Testing
:是否添加单元测试E2E Testing
:是否添加E2E
测试
4.4 选择好特性后依旧再选择Vue版本
我这里选择Vue3.x
。
4.5 选择Babel配置存放位置
In dedicated config files
:把预设配置放单独的文件当中In package.json
:把预设配置放package.json
文件当中
我这里选择放独立文件中,更好找一点。
4.6 选择是否把刚才的选择作为一个项目的预设
我这里输入yes
,并把预设起名为``。
这样就把刚才的所有选择作为一个自定义预设,以便以后复用。
4.7 选择使用哪种包管理工具
Use Yarn
Use PNPM
Use NPM
这个只有第一次使用脚手架配置时才有,之后就会默认选择第一次配置的包管理工具。
如果想要修改可以找到.vuerc
文件去修改。
它的位置在:
C:\Users\用户名\
里面内容大概如下:
{"useTaobaoRegistry": true,"latestVersion": "5.0.8","lastChecked": 1662868181614,"packageManager": "yarn","presets": {"myFirstPreset": {"useConfigFiles": true,"plugins": {"@vue/cli-plugin-babel": {}},"vueVersion": "3"}}
}
连我刚才配置的预设也在里面。
这里有个packageManager
配置,修改它就可以修改项目创建时的默认包管理工具。
4.8 安装完后会显示运行命令
这里会根据选择的包管理工具输出项目目录位置和项目启动命令。
此时运行npm run serve
就可以启动项目了。
五、项目的目录结构说明
使用不同的预设配置目录结构会有所不同,但是主要内容都是差不多的。
5.1 public目录和asset目录的区别:
public
放不会变动的文件(相当于vue-cli2.x
中的static
)public
目录下的文件不会被Webpack
处理:它们会直接被复制到最终的打包目录dist/static
下引用这些文件必须使用绝对路径,这个路径取决于
vue.config.js
中publicPath
的配置,默认的是/
。
assets
放一些可能会变动的文件assets
目录中的文件会被Webpack
处理解析为模块依赖,引用这些文件必须使用想对路径。
5.2 .browserslistrc文件说明:
> 1% # 只适配市场占有率大于1%的浏览器
last 2 versions # 只适配最后两个版本
not dead # 只适配没有停止维护的浏览器
not ie 11 # 不再适配ie11浏览器
5.3 babel.config.js
Babel
使用 AST
把不兼容的代码编译成 ES15
版本,大多数浏览器都支持这个版本的 JavaScript
代码。
毕竟这些年,JavaScript
发生了很大的变化,许多新特性在一些浏览器里都不支持。
Babel
的主要作用就是规避这些问题,可以让 JavaScript
代码兼容几乎所有的浏览器。
这个配置文件是创建项目的时候选择了
In dedicated config files
(把预设配置放单独的文件当中)才会有
5.4 jsconfig.json
这是一个给vscode
读取的文件,可以根据配置给与开发者更好的代码提示。
{"compilerOptions": {"target": "es5", // 默认配置"module": "esnext", // 使用最新的模块化规范"baseUrl": "./", // 基础路径 下面paths中的src路径前就会加上这个baseUrl"moduleResolution": "node", // 模块查找规则"paths": { // 路径别名配置,配置以后在import导入时将有代码提示 "@/*": [ // import时使用@符号将会把按提示src路径一样拥有代码提示"src/*"]},"lib": [ // 可能会用到的库"esnext", // 引入最新的es语法"dom", // 给与domApi更好的提示"dom.iterable", // 给与dom迭代器更好的提示"scripthost" // 给与script宿主环境相关的api更好的提示]}
}
除了path
路径,其它配置一般都不需要主动更改。
Vue组件化开发--脚手架的安装使用、目录结构说明相关推荐
- vue组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...
- Vue组件化开发 - 非常详细,不要错过哦~
源码示例链接:https://pan.baidu.com/s/1NEYDmLl2K7nNa-AKWtJqVA 提取码:2c7a 目标 能够知道组件化开发思想 能够知道组件的注册方式 能够说出组件间的数 ...
- Thymeleaf + Vue组件化开发
Thymeleaf 搭配 Vue 完成组件化开发 前言 一.vue2 1.引入静态文件 2.声明组件 二.语法搭配 使用vue方法调用th数据 前言 提示:thymeleaf 固然好,但是 vue 也 ...
- 三、Vue组件化开发学习笔记——组件化的基本步骤、全局组件和局部组件、父组件和子组件、注册组件的语法糖、模板分离写法、组件的数据存放
一.什么是组件化? 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题 ...
- Vue3.x全家桶之Vue组件化开发(二)
✍灬更新说明 更新时间:2022-1-03 更新内容: Vue2.x 更新至 Vue3.x Demo与文件.截图演示齐全 保留了Coderwhy老师Vue2.x的精华部分,添加Vue3.x的内容 在V ...
- Vue组件化开发--组件通信方式-父传子、子传父、非父子组件传值
一.概述 以脚手架搭建的Vue项目为笔记背景. 如果将所有的代码逻辑全部放到一个组件中,代码是非常的臃肿和难以维护的. 并且在真实开发中,可能会有更多的内容和代码逻辑,对于扩展性和可维护性来说都是非常 ...
- 四、Vue组件化开发学习笔记——父子组件通信,父级向子级传值(props),子级向父级传值(自定义事件),slot插槽
一.父子组件的通信 在上一篇博文中,我们提到了子组件是不能引用父组件或者Vue实例的数据的. 但是,在开发中,往往一些数据确实需要从上层传递到下层: 比如在一个页面中,我们从服务器请求到了很多的数据. ...
- 【Vue 组件化开发 三】父组件给子组件传递数据、组件通信(父传子、子传父)、父访问子(children、ref)、动态组件(is、component)
目录 一.前言 完整内容请关注: 二.父组件给子组件传递数据 1.使用props属性,父组件向子组件传递数据 1.使用组件的props属性 2.向cmessage对象传值 2. props属性使用 1 ...
- Vue——组件化开发DEMO
<template><div><h2>{{messagea}}</h2><button @click="btnClicka"& ...
- vue(9)—— 组件化开发 - webpack(3)
前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...
最新文章
- win8/8.1 免密码登录设置
- 缺少libtool依赖导致编译安装失败
- Quick BI V4.0功能“炸弹”来袭,重磅推出即席分析、模板市场、企业微信免密登录等强势功能
- 日本python教材_自学python:完整入门python书单!
- Spark SQL join的三种实现方式
- linux动态链接库的创建
- 我学习的第一个uiautomator从创建到运行结束
- 为什么黑客都用python-终于发现为什么黑客都用python
- 开发APP不搞清楚这20个问题,必然沦为一场灾难
- 社交电商源码-带直播电商功能-可DIY前端
- UWP 全屏与退出全屏
- Navicat连接本地数据库10038,1251
- VMware Workstation 无法连接到虚拟机。请确保您有权运行该程序、访问该程序使用的所有目录以及访问所有临时文件目录。VMX进程已经提前退出。
- 安卓chrome插件开发!你有过迷茫吗?最全的BAT大厂面试题整理
- 虚幻4与Unity: 哪个游戏引擎是开发者的最爱?
- codeformatter的格式化文件
- VisionMaster 4.0.0 的Modbus通信
- threejs 特效 更多特效相见
- c语言outl函数,Outlook MAPI开发指南
- 多少岁才能评中级工程师,需要工作业绩吗,需要几个工作业绩?