前端框架vue04~~vue.cli脚手架的基本使用

最新推荐文章于 2024-08-13 07:12:34 发布

自学之路←_←

最新推荐文章于 2024-08-13 07:12:34 发布

阅读量398

点赞数

分类专栏： HTML 文章标签： vue vue-cli3 vue3 前端脚手架

本文链接：https://blog.csdn.net/qq_43636251/article/details/119395185

版权

HTML 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

文章目录

1. Vue-CLI脚手架

Vue CLI 是 Vue 的脚手架工具，它可以帮助我们快速生成 Vue 基础项目代码，提供开箱即用的功能特性。

基础代码目录结构
开发服务
本地调试
代码部署
热加载
单元测试
…
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

2. 安装

依赖要求：
Vue CLI 需要Node.js 8.9 或更高版本(推荐8.11.0+)

	# 使用npm安装
	npm install -g @vue/cli
	# 使用yarn安装 
	yarn global add @vue/cli	
	# 查看版本
	vue --version

3. 创建项目

在命令行中输入以下命令创建Vue项目：

	vue create hello-world

Default:默认勾选babel、eslint、回车之后直接进入装包(可以选择使用Vue2或者Vue3)
Manually: 自定义勾选特性配置，选择完毕后，才会进入装包
推荐选择最后一个：手动选择特性，支持更多自定义选项

	? Please pick a preset: 
	  Default ([Vue 2] babel, eslint) 
	  Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
	❯ Manually select features

分别选择：
Choose Vue version： 选择Vue版本
Babel：ES6+转ES5
Router：路由
Vuex：数据容器，存储共享数据
CSS Pre-processors：CSS预处理器，后面会提示你选择Less、Sass、Stylus等
Linter / Formatter：代码格式校验

	? Please pick a preset: Manually select features
	? Check the features needed for your project: 
	 ◉ Choose Vue version
	 ◉ Babel
	 ◯ TypeScript
	 ◯ Progressive Web App (PWA) Support
	 ◉ Router
	 ◉ Vuex
	❯◉ CSS Pre-processors
	 ◉ Linter / Formatter
	 ◯ Unit Testing
	 ◯ E2E Testing

选择 Vue 3.x 版本

	? Choose a version of Vue.js that you want to start the project with 
	  2.x 
	❯ 3.x (Preview)

是否使用 history 路由模式，这种模式兼容不好(兼容性现在已经不是问题多数以后已经不需要考虑老的浏览器)，而且需要设置服务器，所以这里输入 n 不使用
但是 history 模式 URL 的模式看着更舒服

	? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

选择 CSS 预处理器，这里选择我们熟悉的 Less

	? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
	  Sass/SCSS (with dart-sass) 
	  Sass/SCSS (with node-sass) 
	❯ Less 
	  Stylus

选择校验工具，这里选择 ESLint + Standard config

	? Pick a linter / formatter config: 
	  ESLint with error prevention only 
	  ESLint + Airbnb config 
	❯ ESLint + Standard config 
	  ESLint + Prettier

选择在什么时机下触发代码格式校验：

Lint on save：每当保存文件的时候
Lint and fix on commit：每当执行 git commit 提交的时候

	? Pick additional lint features: 
	 ◉ Lint on save
	❯◉ Lint and fix on commit

Babel、ESLint 等工具会有一些额外的配置文件，这里的意思是问你将这些工具相关的配置文件写到哪里：

In dedicated config files：分别保存到单独的配置文件
In package.json：保存到 package.json 文件中

建议选择第一个保存到单独的配置文件中

	? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
	❯ In dedicated config files 
	  In package.json

这里里是问你是否需要将刚才选择的一系列配置保存起来，然后它可以帮你记住上面的一系列选择，以便下次直接重用。
这里根据自己需要输入 y 或者 n，我这里输入 n 不需要。

	? Save this as a preset for future projects? (y/N)

向导配置结束，开始装包。
安装包的时间可能较长，请耐心等待…

	Vue CLI v4.5.11
	✨  Creating project in /Users/js/Desktop/……
	🗃  Initializing git repository...
	⚙️  Installing CLI plugins. This might take a while...
	
	⸨ ░░░░░░░░░░░░░░░░░⸩ ⠏ fetchMetadata: sill pacote range manifest for @babel

安装结束，命令提示你项目创建成功，按照命令行的提示在终端中分别输入：

	⚓  Running completion hooks...
	
	📄  Generating README.md...
	
	🎉  Successfully created project heroes.
	👉  Get started with the following commands:
	
	 $ cd hello-world
	 $ npm run serve

	# 进入你的项目目录
	cd heroes
	
	# 启动开发服务
	npm run serve

启动成功，命令行中输出项目的 http 访问地址。
打开浏览器，输入其中任何一个地址进行访问。

	DONE  Compiled successfully in 6512ms                                                                                           上午10:37:56
	
	
	App running at:
	- Local:   http://localhost:8080/ 
	- Network: http://192.168.15.111:8080/
	
	Note that the development build is not optimized.
	To create a production build, run npm run build.

在这里插入图片描述

4. 目录结构

.browserslistrc：被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀

名称	说明
node_modules	第三方包存储目录
public	静态资源，已被托管
src	源代码
.browserslistrc	转义后的 js 支持的目标浏览器的版本
.editorconfig	该文件用来定义项目的编码规范，编辑器的行为会与该文件中定义的一致
.eslintrc.js	配置 ESLint 的代码校验规则
.gitignore	git 忽略文件，暂时不关心，我们还没有在项目中使用 git
babel.config.js	babel 的配置文件，配置 JS 的降级规则
package.json	包说明文件
package-lock.json	包的版本锁定文件
README.md	项目说明文件

5. src 目录结构

名称	说明
assets	资源目录，存储静态资源，例如图片等
components	存储其它组件的目录
router	路由
store	vuex
views	存放路由组件(我们可以理解为页面)
App.vue	根组件
main.js	入口文件

6. 程序的启动

找到 main.js 入口
加载 Vue，导入 createApp 函数
加载 App 组件
创建和加载 router 和 store
调用 createApp 创建 Vue 的应用对象，注册 router 和 store 插件
将 App 组件替换到入口节点 #app

接下来，我们就不再去 HTML 页面中写模板了，而是一切皆组件。

7. vue 单文件组件

文档: https://vue-loader.vuejs.org/zh/spec.html

7.1 template

作用: 组件的模板

7.2 script

作用：组件的JavaScript，用来配置组件的选项(data、methods、watch等)

写法规则：

	<script>
		//1. 使用一个普通对象配置组件的选项
		const componentOptions={
			data(){
				return {}
			},
			methods:{}
		}
		//2. 将这个对象导出(组件的选项对象必须显示导出，否则不会生效)
		export default componentOptions;
	</script>

为了方便，我们可以直接在定义的同时直接导出

	<script>
		export default {
			data(){
				return {}	
			},
			methods:{}
		}
	</script>

7.3 style

当<style>标签有 scoped属性时，它的CSS只作用于当前组件中的元素.

	<style scoped>
		.example{
			color:red;
		}
	</style>
	<template>
		<div class='example'>hi</div>
	</template>

转换结果

	<style>
		.example[data-v-f3f3eg9]{
			color:red;
		}
	</style>
	
	<template>
		<div class='example[data-v-f3f3eg9]'>h1</div>
	</template>

可以在组件中同时使用`scoped`和`非scoped`样式

	<style>
		/* 全局样式 */
	</style>
	
	<style scoped>
		/* 本地样式 */
	</style>

使用scoped后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的scoped CSS和子组件的scoped CSS的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式.

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

	<style scoped>
		.a >>> .b {
			/* ... */
		}
	</style>

	<style scoped>
		.a :deep(.b) {
			/* ... */
		}
	</style>

上述代码将会编译成：

	.a[data-v-f3f3eg9] .b {
	  /* ... */
	}

8. 单文件组件的定义和使用

8.1 创建单文件组件

推荐把通用组件创建到 components 目录中
把视图组件定义到 views 目录中
单文件组件只是承载组件的容器而已，既不是全局也不是局部，如果要使用这个单文件组件，必须注册
1.全局注册使用，可以在任何组件中使用
2.局部注册使用，只能在注册的组件中被使用

	<template>
		<div>foo 组件</div>
	</template>
	
	<script>
		export default{
			data(){},
			methods:{}
			// ...
		}
	</script>
	
	<style></style>

8.2 全局注册使用

在main.js 文件中进行注册
注册后，可以在任何组件中使用 Com1 组件了。

	...
	import Vue from 'vue'
	import Com1 from './components/Com1.vue'
	
	...
	Vue.component('Com1', Com1)

8.3 局部注册使用

在某个组件中局部使用

	<template>
		<!-- 使用 Com2组件 -->
		<div><Com2></Com2></div>
	</template>
	<script>
		import Com2 from './components/Com2';
		export default{
			components:{
				Com2
			}
		}
	</script>
	<style>
	</style>

9. 热重载

当使用脚手架工具 vue-cli 时，热重载是开箱即用的。

“热重载”不只是当你修改文件的时候简单重新加载页面。启用热重载后，当你修改.vue文件时，该组件的所有实例将在不刷新页面的情况下被替换。它甚至保持了应用程序和被替换组件的当前状态！当你调整模版或者修改样式时，这极大地提高了开发体验。

在这里插入图片描述

9.1 状态保留规则

当编辑一个组件的<template> 时，这个组件实例将就地重新渲染，并保留当前所有的私有状态。能够做到这一点是因为模板被编译成了新的无副作用的渲染函数。

当编辑一个组件的 <script> 时，这个组件实例将就地销毁并重新创建。(应用中其它组件的状态将会被保留) 是因为<script>可能包含带有副作用的生命周期钩子，所以将重新渲染替换为重新加载是必须的，这样做可以确保组件行为的一致性。这也意味着，如果你的组件带有全局副作用，则整个页面将会被重新加载。