阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      vue create 创建一个由vue-cli-service支持的新项目

      功能

      创建一个由vue-cli-service支持的新项目

      使用

      创建

      运行以下命令来创建一个新项目:

      当前目录下新建一个目录

      vue create axi-demo
      

      基于当前目录创建

      vue create ./
      

      使用当前的目录创建,会提示你是否确认

      https://a.axihe.com/vue/vue-cli/vue-cli-current.png

      选择预设

      你会被提示选取一个 preset。

      你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。

      这个默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。

      操作:上下按键可以进行筛选,Enter建可以确认

      默认预设

      https://a.axihe.com/vue/vue-cli/vue-cli-de-01.png

      https://a.axihe.com/vue/vue-cli/vue-cli-de-02.png

      package.json

      {
        "name": "axi-demo",
        "version": "0.1.0",
        "private": true,
        "scripts": {
          "serve": "vue-cli-service serve",
          "build": "vue-cli-service build",
          "lint": "vue-cli-service lint"
        },
        "dependencies": {
          "core-js": "^3.6.4",
          "vue": "^2.6.11"
        },
        "devDependencies": {
          "@vue/cli-plugin-babel": "~4.2.0",
          "@vue/cli-plugin-eslint": "~4.2.0",
          "@vue/cli-service": "~4.2.0",
          "babel-eslint": "^10.0.3",
          "eslint": "^6.7.2",
          "eslint-plugin-vue": "^6.1.2",
          "vue-template-compiler": "^2.6.11"
        },
        "eslintConfig": {
          "root": true,
          "env": {
            "node": true
          },
          "extends": [
            "plugin:vue/essential",
            "eslint:recommended"
          ],
          "parserOptions": {
            "parser": "babel-eslint"
          },
          "rules": {}
        },
        "browserslist": [
          "> 1%",
          "last 2 versions"
        ]
      }
      

      手动选择预设

      选择手动指定后,会让你继续选择

      https://a.axihe.com/vue/vue-cli/vue-cli-diy-01.png

      操做

      • a
        • 全选
      • i
        • 全不选
      • 空格
        • 选择和取消选择当前
      • 回车
        • 确定

      https://a.axihe.com/vue/vue-cli/vue-cli-diy-02.png

      其他的一些选择

      这个具体就是看自己的项目还有喜好来选择了,具体如下选择

      https://a.axihe.com/vue/vue-cli/vue-cli-diy-03.png

      我做了一个简单的翻译

      https://a.axihe.com/vue/vue-cli/vue-cli-diy-03-2.png

      存储自定义预设

      存储保存

      如果你最后选择存储预设的选项,会让你输入你的预设名字

      https://a.axihe.com/vue/vue-cli/vue-cli-diy-03-3.png

      使用自定义的预设

      然后以后再次使用vue create .就特别方便了,可以直接选择你储存的预设

      https://a.axihe.com/vue/vue-cli/vue-cli-diy-03-4.png

      已存储预设的修改

      可以通过~/.vuerc来修改

      被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 选项,可以编辑这个文件。

      在项目创建的过程中,你也会被提示选择喜欢的包管理器或使用淘宝 npm 镜像源以更快地安装依赖。这些选择也将会存入 ~/.vuerc

      https://a.axihe.com/vue/vue-cli/vuerc.png

      可选项

      vue create 命令有一些可选项,你可以通过运行以下命令进行探索:

      vue create --help
      
      用法:create [options] <app-name>
      
      创建一个由 `vue-cli-service` 提供支持的新项目
      
      
      选项:
      
        -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
        -d, --default                   忽略提示符并使用默认预设选项
        -i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
        -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
        -r, --registry <url>            在安装依赖时使用指定的 npm registry
        -g, --git [message]             强制 / 跳过 git 初始化,并可选的指定初始化提交信息
        -n, --no-git                    跳过 git 初始化
        -f, --force                     覆写目标目录可能存在的配置
        -c, --clone                     使用 git clone 获取远程预设选项
        -x, --proxy                     使用指定的代理创建项目
        -b, --bare                      创建项目时省略默认组件中的新手指导信息
        -h, --help                      输出使用帮助信息
      
      目录
      目录