vue cli

什么是 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

1. "打包"文件用来部署到生产环境

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 启动项目