npm i vue-cli -g
vue init webpack-simple vue-todos

vue-cli 是一個官方發(fā)布 vue.js 項目腳手架，使用 vue-cli 可以快速創(chuàng)建 vue 項目。
-g代表全局安裝。
i就是install的縮寫。
其中webpack-simple代表模板的名稱。vue-todos是你給自己的項目起的名稱，這個隨便起。

配置完成后，可以看到目錄下多出了一個項目文件夾，里面就是 vue-cli 創(chuàng)建的一個基于 webpack-simple 的 vue.js 項目。

image.png

之后一直回車，，并切換到vue-todos的目錄
接著執(zhí)行

npm i

之后就可以運行了

npm run dev

這時可以修改上述App.vue的文件。
比如改為

<template>
<div id="app">
  <button v-on:click="counter += 1">增加 1</button>
  <p>這個按鈕被點擊了 {{ counter }} 次。</p>
</div>

</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      counter: 0,
    }
  }
}
</script>

其中export default代表導(dǎo)出。然后在main.js利用import導(dǎo)入

運行的話結(jié)果就是

image.png

總結(jié)

vue-cli就是一個根據(jù)模板快速創(chuàng)建工程的工具（命令）啦~。

參考

javascript - npm i 和npm install區(qū)別 - SegmentFault
Vue 爬坑之路（一）—— 使用 vue-cli 搭建項目 - WiseWrong - 博客園
JavaScript ES6中export及export default的區(qū)別 - zhou_xiao_cheng的博客 - CSDN博客