Vue CLI 3使用:创建项目(一)
2019-02-18 本文已影响0人
Raydom
Vue CLI 官方提供的脚手架工具,目前已更新到vue cli 3,和之前的2还是有很大区别的。
安装cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
查看cli版本
vue -V
vue --version
快速原型开发
vue serve
和 vue build
命令对单个 *.vue
文件进行快速原型开发,不过这需要先额外安装一个全局的扩展:
npm install -g @vue/cli-service-global
vue serve
在文件目录直接运行vue serve
命令
vue serve [options] [entry]
options:
-o, --open 打开浏览器
-c, --copy 将本地 URL 复制到剪切板
-h, --help 输出用法信息
vue serve
和 vue create
将使用创建项目时相同的默认设置 (webpack、Babel、PostCSS 和 ESLint)。如果不指定入口文件,会查找 main.js
、index.js
、App.vue
或 app.vue
这些文件。
如果需要,你还可以提供一个 index.html
、package.json
、安装并使用本地依赖、甚至通过相应的配置文件配置 Babel、PostCSS 和 ESLint。
vue build
你也可以使用 vue build
将目标文件构建成一个生产环境的包并用来部署:
vue build [options] [entry]
在生产环境模式下零配置构建一个 .js 或 .vue 文件
Options:
-t, --target <target> 构建目标 (app | lib | wc | wc-async, 默认值:app)
-n, --name <name> 库的名字或 Web Components 组件的名字 (默认值:入口文件名)
-d, --dest <dir> 输出目录 (默认值:dist)
-h, --help 输出用法信息
创建一个项目
vue create
vue create test
可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。
更多设置项:
vue 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 输出使用帮助信息
使用图形化界面
也可以使用ui界面进行创建项目
vue ui
UI 界面创建项目
然后根据界面提示进行操作创建项目。