单文件组件(SFC)
- 全称:single-file components
- 文件后缀(扩展)名为 .vue
- 解决的问题:
- 全局定义组件可能会出现命名冲突
- 字符串的 template 没有语法高亮
- 对 CSS 的支持不友好
- 没有明显的构建过程
单文件组件语法:
<template>
模板语法
</template>
<script>
// 定义并导出组件的选项对象模块
</script>
<style lang="scss" scoped>
/* 样式 */
div {
}
</style>
- template:视图结构
- script:交互逻辑
- style:样式
- lang:使用 css 预处理器,如:scss、less
- scoped:表示所书写的样式仅支持在当前组件中使用,其它组件不受影响
Vue Loader
Vue Loader 是一个 webpack 的 loader,它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件
Vue CLI
- 基于 Vue.js 进行快速开发的完整系统
- 脚手架:快速搭建项目结构
- 安装$ npm install -g @vue/cli
OR
- 安装:$ yarn global add @vue/cli
- 安装完毕后,可以在 cmd 命令行中输入:$ vue --version如果能够查看到版本信息,则说明安装成功,否则安装失败或环境变量配置有问题
- 创建项目
- GUI - 图形化用户界面$ vue ui
- 命令行执行创建命令:$ vue create project-name
- 命令行显示创建项目的向导
- 选择手动选择项目新特性项:
? 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
3.x
> 2.x - 选择 CSS 预处理器:
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
> Less
Stylus - 选择 linter 规范:
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
> ESLint + Standard config
ESLint + Prettier - 选择保存时验证并格式化:
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to pr
oceed)
>(*) Lint on save
( ) Lint and fix on commit - 选择配置文件存放位置:
? 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)
如果是 yes,则还需要输入预设项名称
安装项目依赖
- 项目创建成功后,进入项目目录,运行任务:
$ cd project-name
$ npm run serve # 或 yarn serve - 项目说明
- public 目录中放置的是应用的 html 文件(通常只有一个 index.html)
- src 目录中放置我们自己项目中所书写的源代码
- src 下 main.js 是应用的入口 JS 文件
- .eslintrc.js 是 ESLint 的配置文件
- babel.config.js 是 Babel 的配置文件
- package.json 是项目配置文件
- vue.config.js 是 Vue CLI 的配置文件(在 VueCLI4.x 中这个文件需要自己手动创建)
- npm scripts
{
"scripts": {
"start": "npm run serve",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
}
/*
* start:自定义开始启动
* serve: 开发任务,会自动启动开发服务器(webpack-dev-server)
* build:生产任务,构建生产环境下的资源
* lint:验证并格式化代码
*/
安装 VSCode 插件(规范验证)
- ESLint ES规则验证
- Vetur Vue书写格式验证
- 注意:
- 在VSCode中只能有一个Vue项目,否则会报错
- 也可以在.json文件中修改 requireConfigFile: false