什么是 cli
cli(Command line interface)即命令行接口，也被称作脚手架。
vue 的脚手架致力于快速的搭建一个符合 CommonJS 规范的 vue 项目，并配有一些可供选择的预设。
安装 vue cli
npm i -g @vue/cli
cli 与 单个 .vue 文件
vue cli 支持对单个 .vue 文件的 serve 与 build，但这需要安装额外的全局扩展
npm i -g @vue/cli-service-global
vue serve
serve 命令可以 host 一个单独的 .vue / .js 文件项目。
vue serve [options] [entry]
options:
- -o open 浏览器
- -c copy url 到剪切板
- -h help 信息
entry: .js 或 .vue 文件
假设有如下 demo.vue 文件：
在该例中，笔者尽可能多的把 html, js, css 都用到些
<template>
<ul>
<li
class="demo"
v-for="(fruit,index) in fruits"
:key="index"
:class="{'demo-selected': selectedFruit === fruit}"
@click="select(fruit)"
>{{index}}: {{fruit}}</li>
</ul>
</template>
<script>
export default {
data() {
return {
selectedFruit: "西瓜",
fruits: ["西瓜", "苹果", "水蜜桃", "香蕉", "樱桃"]
};
},
methods: {
select(fruit) {
this.selectedFruit = fruit;
}
}
};
</script>
<style scoped>
ul {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
list-style: none;
}
li {
width: 256px;
}
.demo {
border-radius: 2px;
box-shadow: 0px 0px 5px -1px #333;
transition: box-shadow 0.25s;
margin: 10px;
padding: 3px;
}
.demo:hover {
cursor: pointer;
box-shadow: 0px 0px 10px -1px #333;
}
.demo-selected {
background-color: dodgerblue;
color: #fff;
}
</style>
你可以在文件所在路径执行 vue serve demo.vue -o host 起该 vue 文件。
vue build
- "打包"文件用来部署到生产环境
vue build [options] [entry]
options:
- -t 构建目标
- -n 库名称或 Web Components 组件名称
- -d 输出目录
- -h help
entry: 文件
还是对上面的 demo.vue 文件做实验
vue build demo.vue -d demo
构建目录结果：
.
├─demo
│ ├─css
│ └─js
└─node_modules
└─.cache
└─vue-loader
构建一个 Web Component
vue build demo.vue -t wc -n demo-ui
目录
.
├─dist
└─node_modules
└─.cache
└─vue-loader
构建 lib 同样是生成一个 dist 文件夹
文件夹里面是有文件的，并不是空的
使用 cli 创建一个项目
vue create hello-world
然后有一些预设需要勾选
按空格(space)选择，按回车(enter)确认
此外还可以通过 图形化项目管理界面 创建/管理项目
vue ui
执行项目
进入项目目录后，执行 npm run serve 启动项目
