Vue CLI 3搭建项目详解

vue cli 3 介绍

上次用vue的时候,vue cli的版本还是2,对应指令还是 vue init < 模板名称 > < 项目名称 >

vue-cli提供的模板有:
webpack				一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。
webpack-simple		一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。
browserify			一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
browserify-simple	一个简单Browserify+vueify的模板,不包含其他功能,让你快速的搭建vue的开发环境。
simple*				一个最简单的单页应用模板。

最近用的时候,已经有vue cli 3了,大致跑了一下,问题还是不大的,但是还是踩了些坑,具体在文章后续会分享。

前期准备

卸载旧版本

vue cli 升级到3后,package的名字从 vue-cli 改为了 @vue/cli,装了旧版本的,官方的建议是,把旧版本的卸载了,再安装新版本。
卸载指令如下:
npm uninstall vue-cli -g or yarn global remove vue-cli

node版本

官方建议,node.js的版本,需要是8.9或者以上(建议是8.11.0+

安装

安装指令如下:
npm install -g @vue/cli or yarn global add @vue/cli

创建项目

vue create

  1. 选择features
    features
    这里我选了第二个,手动选择需要的,个人选择了下图所示的内容。
    Vue CLI 3搭建项目详解_第1张图片
  2. 是否使用history路由,这里感觉必要性不大,所以就没用上,有兴趣的或者需要使用的,可以参考Routing with history.pushState
  3. 选择css处理器,一般这里选第一个就可以了
    css处理器
  4. 代码风格和eslint
    代码风格
    这里选的是eslint + standard config , 个人比较习惯这种风格,具体怎么选择看个人习惯吧。
  5. 选择lint
    lint
  6. 选择lint的配置文件如何存放,这里我选了分别存到具体的config文件,而不是package,便于管理
    lint配置文件存放
  7. 是否保存本次创建项目的配置项,用于下次快速创建项目
    是否保存配置项
  8. 然后就可以愉快地等待创建项目了
    这里写图片描述

注意事项

vue cli配置文件

文件路径是:C:\Users\【用户名】\.vuerc
文件内容大致如下:

{
  "packageManager": "npm",
  "presets": {
    "vue_create_project": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "standard",
          "lintOn": [
            "save"
          ]
        }
      },
      "router": true,
      "routerHistoryMode": false,
      "vuex": true,
      "cssPreprocessor": "sass"
    }
  },
  "useTaobaoRegistry": false
}

解析

packageManager 用于指定安装包和运行时,使用的是npm还是yarn
presets 上述安装步骤中,第7步询问是否保存创建配置,用于下次快速创建项目

关于配置,不小心踩的坑

安装过程中,曾经询问过我是用npm还是yarn指定安装包和运行,但是,由于没细看,选了yarn,后续安装过程中一直报错,具体错误如下图:

Vue CLI 3搭建项目详解_第2张图片

多次卸载重装vue cli,但是并没有解决问题,也没有重新提醒我选择npm或者yarn。
想了想,那可能是配置文件的问题了,但是又不知道vue cli 3的配置文件存在哪,想了想,会不会和设置npm源一样,可以用npm config这类指令呢
于是,打开了cmd,输入了vue -h
Vue CLI 3搭建项目详解_第3张图片

看到了有vue config指令,输入后显示如下:
Vue CLI 3搭建项目详解_第4张图片
除了把配置文件打印出来,还把配置文件路径打印出来了,so,不用看了,多次卸载重装,但是依旧未果的原因,就是因为卸载重装不会删除配置文件,这里直接把packageManager改成npm,就解决了上面遇到的问题了

参考链接

Vue CLI 3官网
Vue CLI 3指引文档(中)
Vue CLI 3指引文档(英)
对vue cli 2 感兴趣的,可以访问 git 上 vuejs/vue-cli 项目文档

你可能感兴趣的:(Vue CLI 3搭建项目详解)