vue-cli版本查看、更新、创建项目

vue-cli的版本查看

vue -V

vue-cli的3.0+以后使用的不是vue-cli了,如果安装3.0的话就需要使用新的命令,如下:

npm install @vue/cli -g

vue/cli4的安装与使用

  1. 若你已安装过vue-cli3一下的版本的话,你得先卸载掉,命令如下:
//首先查看是否已安装过 vul-cli 和 vul-cli 的版本
vue -V
//如是有的话且版本小于3.0,就用下面命令卸载
npm uninstall vue-cli -g
  1. 安装vue-cli 3.0以上版本(目前是4.5.8)
// 安装vue-cli  
npm install @vue/cli -g 
//也可使用cnpm 来安装 ,比较快(前提是使用了淘宝镜像)
cnpm install @vue/cli -g
  1. 创建一个项目
//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里面)

猜你喜欢

转载自blog.csdn.net/qq_17627195/article/details/109194346