zoukankan      html  css  js  c++  java
  • Vue Cli 3:创建项目

    一 简介

    Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,有几个独立的部分。

    CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令。(vue create、vue serve等)

    CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包,局部安装在每个 @vue/cli创建的项目中。CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。

    CLI 插件是向你的 Vue 项目提供可选功能的 npm 包,例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。

    (例如,手动创建项目时,Vue Cli 3会添加@vue/cli-plugin-babel、@vue/cli-plugin-eslint、@vue/cli-plugin-unit-jest等插件)

    二 安装

    Vue CLI 的包名称由 vue-cli 改成了 @vue/cli

    1 如果已经全局安装了旧版本的 vue-cli(1.x 或 2.x),需要先卸载。

    npm uninstall -g vue-cli# OR
    yarn global remove vue-cli

    2 安装新的包

    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli

    3 检查版本

    vue --version
    # OR
    vue -V

    三 创建项目

    1 项目名称

    vue create vue-demo

    2 选择预设的配置

    最后两个是系统预设的配置,前面的都是用户保存的预设的配置。

    3 选择项目需要的配置

    ↑↓移动光标,空格切换选中状态,回车确认结果

    4 选择Vue Router模式

    Vue Router默认hash模式,也可以使用history模式。

    使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!

    5 选择CSS预处理器

    6 配置代码检测、格式化

     使用ESLint进行代码检测,使用Prettier插件进行代码格式化。

    7 代码检测的时机

    保存时检测。

    8 单元测试方案

    Jest是由Facebook推出的JavaScript测试框架。

    9 配置保存位置

    保存到单独的文件里。

    10 将本次设置保存为预设,以便复用

    11 预设的名称

    12 创建项目

    所有选项完成后,Vue Cli 3才会开始创建目录,安装npm包等。

  • 相关阅读:
    目前流行前端几大UI框架排行榜
    vue nginx配置
    快速切换npm源
    vue项目打包部署生产环境
    VScoed Vue settings.json配置
    java获取远程图片分辨率
    Fegin的使用总结
    线程池核心参数
    mysqldump定时任务生成备份文件内容为空解决方法
    对汉字编码
  • 原文地址:https://www.cnblogs.com/sea-breeze/p/11314274.html
Copyright © 2011-2022 走看看