vue使用vue-cli快速建立工程，vuevue-cli工程

vue使用vue-cli快速建立工程，vuevue-cli工程

本文介紹了vue使用vue-cli快速建立工程，分享給大家，具體如下：

vue-cli安裝

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

vue-cli 是一個官方發布 vue.js 項目腳手架，使用 vue-cli 可以快速建立 vue 項目。

-g代表全域安裝。

i就是install的縮寫。

其中webpack-simple代表模板的名稱。vue-todos是你給自己的項目起的名稱，這個隨便起。

配置完成後，可以看到目錄下多出了一個專案檔夾，裡面就是 vue-cli 建立的一個基於 webpack-simple 的 vue.js 項目。

之後一直斷行符號，，並切換到vue-todos的目錄

接著執行

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代表匯出。然後在main.js利用import匯入

啟動並執行話結果就是

總結

vue-cli就是一個根據模板快速建立工程的工具（命令）啦~。

參考

Vue 爬坑之路（一）—— 使用 vue-cli 搭建項目 

JavaScript ES6中export及export default的區別

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。