vue-cli版本查看、更新：点击查看

创建一个项目

//1. 命令 回车
  vue create 项目名
//2.选择自定义配置
  Manually select features
//3.选择你需要的配置（用空格选中）
  Babel (必选)
  TypeScript（项目中使用ts开发的话，就勾选）
  Progressive Web App (PWA) Support  (接口缓存，优化项目)
  Router
  Vuex 
  CSS Pre-processors (css预处理器，需要)
  Linter / Formatter (代码格式，一般默认选中)
  Unit Testing (代码测试)
  E2E Testing（需求界面测试）
//4.根据你选的配置进行Y/N选择
//5.选择完之后，就可以运行项目  
npm run serve
  1. 创建项目配置说明
    babel：
    是解析我们es6的代码的，为什么要用它呢？是因为对于一些ie浏览器，甚至其他的浏览器的低版本，还不能识别es6代码，但是vue里面好多es6的代码，这个时候我们就可以用babel这个工具将我们的es6的代码转译成浏览器能识别的代码。所以必须要选择。
    TypeScript
    如果项目中使用typescripy开发的话，就选择
    Progressive Web App(PWA)
    渐进式网络应用程序(Progressive Web Apps)
    渐进式Web应用程序是将最佳网络和最佳应用程序相结合的体验。从浏览器选项卡中的第一次访问开始，它们对用户非常有用，无需安装。随着用户逐渐与应用程序建立关系，它变得越来越强大。即使在片状网络上，它也能快速加载，发送相关的推送通知，主屏幕上有一个图标，并作为顶级全屏体验加载。
    Router
    路由，有需要就选择，也可以之后引入
    Vuex
    仓库，有需要就选择，也可以之后引入
    CSS pre-processor
    选择css预处理
    Linter/Formatter
    代码风格、格式校验
    a. ESLint with error prevention only
    只配置使用 ESLint 官网的推荐规则
    b. ESLint + Airbnb config
    使用 ESLint 官网推荐的规则 + Airbnb 第三方的配置
    c. ESLint + Standard config
    使用 ESLint 官网推荐的规则 + Standard 第三方的配置
    d. ESLint + Prettier
    使用 ESLint 官网推荐的规则 + Prettier 第三方的配置
    Prettier 主要是做风格统一。代码格式化工具
    Unit Testing
    代码测试
    E2E Testing
    需求界面测试
    pick additional lint features
    代码校验
    Lint on save （保存就检查）
    Lint and fix on commit（fix和commit时候检查）
    Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
    存放配置
    In dedicated config files（保存到其他专用配置文件里）
    In package.json（保存到package.json里面）

安装选择：

? Choose a version of Vue.js that you want to start the project with 
❯ 2.x
  3.x
  #选择vue的版本，我选的是2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y  
对于路由的模式是否为 history。选 yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): 
  Sass/SCSS (with dart-sass) # Sass安装需要Ruby环境，是在服务端处理的，SCSS 是 Sass3新语法（完全兼容 CSS3且继承Sass功能）
❯ Sass/SCSS (with node-sass) 	#一般选择这个
  Less Less # 最终会通过编译处理输出css到浏览器，Less 既可以在客户端上运行，也可在服务端运行 (借助 Node.js)
  Stylus # 主要用来给Node项目进行CSS预处理支持，Stylus功能上更为强壮，和js联系更加紧密，可创建健壮的、动态的的CSS。
? Pick a linter / formatter config: 
  ESLint with error prevention only # 只有错误预防
  ESLint + Airbnb config # Airbnb 配置
  ESLint + Standard config # 标准配置
❯ ESLint + Prettier # 使用较多 (漂亮的配置)
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯ Lint on save # 保存就检查代码
  Lint and fix on commit # fix和commit时候检查代码
# 将Babel、ESLint等其他选项是独立放置，还是在package.json文件中。
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files # 独立文件放置（一般选此项）
  In package.json # 放在package.json里
? Save this as a preset for future projects? (y/N) y 
# 选择yes，记录本次配置，然后需要你起个名，方便下次配置
# 选择no，不进行记录
? Save preset as: test # 配置项的名称为test。

最终配置

vue项目中创建 less变量 vue 创建类_json