vue-cli 3.0 脚手架安装及配置

安装 vue-cli

1
2
3
npm install -g @vue/cli
# OR
yarn global add @vue/cli

创建一个新项目

1
vue create hello-world

通过空格键和上下键选择配置

Tips: 不要用git base 这种工具创建

GUI

使用vue ui进行图形界面创建和管理项目

1
vue ui

CLI服务

在package.json使用默认预设的项目中看到的内容

1
2
3
4
5
6
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
}
}

可以使用npm或Yarn调用这些脚本:

1
2
3
npm run serve
# OR
yarn serve

如果有npx可用(应与最新版本的npm捆绑在一起),还可以直接使用以下命令调用二进制文件:

1
npx vue-cli-service serve

vue-cli-service serve

1
2
3
4
5
6
7
8
Usage: vue-cli-service serve [options]
Options:
--open 服务器启动时打开浏览器
--copy 将URL复制到服务器启动时的剪贴板 (直接到浏览器去粘贴就OK了 http://localhost:8080/)
--mode 指定环境模式 (默认: development)
--host host 地址 (default: 0.0.0.0)
--port 端口号 (default: 8080)
--https 使用https (default: false)

vue-cli-service build

1
2
3
4
5
6
7
8
9
10
11
Usage: vue-cli-service build [options] [entry|pattern]
Options:
--mode 指定环境模式 (default: production)
--dest 指定输出目录 (default: dist)
--modern 构建两个版本的 js 包:一个面向支持现代浏览器的原生 ES2015+ 包,以及一个针对其他旧浏览器的包。
--target 允许您以项目库或Web组件的形式在项目内部构建任何组件 app | lib | wc | wc-async (default: app) ???
--name lib或者web组件库的名称 (default: "name" in package.json or entry filename)
--no-clean 在构建项目之前不要删除输出目录(dist)
--report 生成report.html以帮助分析包内容
--report-json 生成report.json来帮助分析包内容
--watch 监听 - 当有改变时 自动重新打包~

vue-cli-service inspect

使用vue-cli-service inspect来检查Vue CLI项目中的webpack配置。有关更多详细信息,请参阅检查Webpack配置

1
2
3
Usage: vue-cli-service inspect [options] [...paths]
Options:
--mode 指定环境模式 (default: development)

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :