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                      输出使用帮助信息

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>