vue使用vue-cli快速創(chuàng)建工程

發(fā)布時(shí)間：2020-09-13 20:17:51 來源：腳本之家閱讀：183 作者：鴨梨山大哎欄目：web開發(fā)

本文介紹了vue使用vue-cli快速創(chuàng)建工程，分享給大家，具體如下：

vue-cli安裝

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

vue-cli 是一個(gè)官方發(fā)布 vue.js 項(xiàng)目腳手架，使用 vue-cli 可以快速創(chuàng)建 vue 項(xiàng)目。

-g代表全局安裝。

i就是install的縮寫。

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

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

vue使用vue-cli快速創(chuàng)建工程

之后一直回車，，并切換到vue-todos的目錄

接著執(zhí)行

npm i

之后就可以運(yùn)行了

npm run dev

這時(shí)可以修改上述App.vue的文件。

比如改為

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

</template>

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

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

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

vue使用vue-cli快速創(chuàng)建工程

總結(jié)

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

參考

Vue 爬坑之路（一）—— 使用 vue-cli 搭建項(xiàng)目

JavaScript ES6中export及export default的區(qū)別

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

vue使用vue-cli快速創(chuàng)建工程

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽