介绍及环境

Vue.js（读音 /vju?/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue只关注视图层， 采用自底向上增量开发的设计。Vue的目标是通过尽可能简单的 API实现响应的数据绑定和组合的视图组件。

官方网站：https://v3.vuejs.org/，中文文档：https://v3.cn.vuejs.org/guide/introduction.html

独立版本在Vue.js官网上直接下载，用<script>标签引入，使用CDN：

unpkg（推荐）：https://unpkg.com/vue@next （会保持和 npm 发布的最新的版本一致）。

Staticfile CDN（国内）：https://cdn.staticfile.org/vue/3.2.31/vue.global.js

环境说明

node版本（node -v）：v14.16.1

npm版本（npm -v）：6.14.12

yarn版本（npm -v）：1.22.17

安装vue-cli

npm安装vue-cli：

npm install -g @vue/cli

yarn安装vue-cli：

yarn global add @vue/cli

查看版本：

vue -V

vue --version

版本为：@vue/cli 5.0.1

创建项目

创建

vue create my-project

这里提供了3中设置：Vue3版（Default ([Vue 3] babel, eslint)）、Vue2版（Default ([Vue 2] babel, eslint)）、手动选择功能（Manually select features）

这里选择：Manually select features

选择配置

(*) Babel：支持用Babel编译器；

(*) TypeScript：支持使用 TypeScript 书写源码；

( ) Progressive Web App (PWA) Support：支持PWA；

(*) Router：支持vue-router；

(*) Vuex：支持vuex；

(*) CSS Pre-processors：支持CSS预处理器；

(*) Linter / Formatter：支持代码风格检查和格式化；

( ) Unit Testing：支持单元测试；

( ) E2E Testing： 支持E2E测试；

选择Vue版本

这里选择：3.x

是否使用babel做转义

这里选择：Y

是否使用Babel与TypeScript一起用于自动检测的填充

这里选择：Y

是否使用history路由模式

这里选择：Y

选择CSS预处理器

Sass/SCSS分两种：

node-sass：用node（调用cpp编写的libsass）来编译sass，是自动编译实时。

dart-sass：用drat VM来编译sass，需要保存后才会生效。

这里选择：Sass/SCSS (with dart-sass)

选择eslint配置

1、ESLint with error prevention only：只进行报错提醒；

2、ESLint + Airbnb config：Airbnb配置，不严谨模式；

3、ESLint + Standard config：标准配置，正常模式；

4、ESLint + Prettier：严格模式；

这里选择：ESLint with error prevention only

选择什么时候执行eslint校验

Lint on save：保存时检查

Lint and fix on commit：提交时检查

这里选择：Lint on save

选择配置文件存放的位置

In dedicated config files：在专用的配置文件中单独存放。

In package.json：存放在package.json中。

这里选择：In dedicated config files

是否保存之前的配置项

这里选择：N

下载依赖模块

等待创建好。

启动项目

进入目录： cd my-project

启动项目：yarn serve 或者 npm run serve

访问：http://localhost:8080/

打开项目