Vue CLI
快速开发的一套完整系统,主要先使用脚手架功能。
安装
$ npm install -g @vue/cli
安装完毕后,在 cmd 命令行下,可以使用 vue --version
来查看版本信息
创建项目
利用命令行方式创建项目:
- 执行创建命令:
$ vue create vue-cli-demo
- 根据向导选择预设还是手动:
? Please pick a preset:
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
> Manually select features
- 手动选择项目使用特性:
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
(*) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
- 选择 Vue 版本:
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
2.x
- 选择 css 预处理器:
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
sass
> less
stylus
- 选择在哪儿放置配置文件:
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
- 是否保存上述所先为预设项:
? Save this as a preset for future projects? (y/N) n
- 选择完毕后,会根据所选特性安装依赖,创建项目结构
- 项目创建完毕后,可看到类似如下提示:
success Saved lockfile.
Done in 31.00s.
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project vue-cli-demo.
👉 Get started with the following commands:
$ cd vue-cli-demo
$ npm run serve
- 进入项目目录,运行项目:
$ cd vue-cli-demo
$ npm run serve
运行成功,显示:
DONE Compiled successfully in 18335ms 上午10:07:53
App running at:
- Local: http://localhost:8080/
- Network: http://10.7.172.58:8080/
Note that the development build is not optimized.
To create a production build, run yarn build.
启动成功后,会在本地开启一个 webserver 放置开发阶段的代码,可以在浏览器中访问 http://localhost:8080/
查看开发测试效果
项目结构
|- public 这个目录中放置的是项目的静态 html 文件及相关资源
|- src 开发过程中所编写的项目源文件
|- main.js 这是整个项目的 JS 入口文件(不能改名称)
|- babel.config.js 这是babel工具的配置文件
|- package.json 这是整个项目的配置文件
|- vue.config.js 这是 VueCLI 的配置文件
package.json
scripts:
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
}
在命令行下可使用 npm run
来运行这些脚本
- serve: 开发任务,会启动开发服务器
- build: 生产任务,项目开发完毕后可打包构建
main.js
import { createApp } from 'vue'
createApp({}).mount('#app')
单文件组件
SFC,后缀名为 *.vue
的文件是单文件组件
能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中:
<template>
<!-- 模板语法所表示的视图 -->
</template>
<script>
// JS 逻辑交互
export default {
data() {
return {}
},
methods: {},
computed: {},
}
</script>
<style lang="less" scoped>
/*
* 样式
* 添加 scoped 表示当前所书写的样式仅在当前组件内部有作用
*/
</style>
在 VSCode 中推荐安装 Volar 扩展,这样在书写 SFC 时可获得更好的体验
组件生命周期
从组件创建开始,到最终组件销毁,所经历的整个过程。
生命周期钩子:
在正常的生命周期过程中,某些特定场景下可以添加用户自己的代码执行
常见8个生命周期钩子:
create 阶段
- beforeCreate(): 这个钩子中还不能拿到 data 数据
- created(): 可以获取到 data 数据处理使用,一般发送网络请求是在这个方法中
mount 阶段
- beforeMount(): 挂载前执行,还不能获取到渲染后的 DOM 节点信息
- mounted(): 可获取渲染后的 DOM 信息
update 阶段
当 data 或 props 数据发生改变,会进入 update 阶段
- beforeUpdate()
- updated()
卸载(销毁)阶段
vue2.x
- beforeDestroy()
- destroyed()
vue3.x
- beforeUnmount()
- unmounted()