vue使用vue-cli快速創(chuàng)建工程
本文介紹了vue使用vue-cli快速創(chuàng)建工程,分享給大家,具體如下:
vue-cli安裝
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 項目。
之后一直回車,,并切換到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é)果就是
總結(jié)
vue-cli就是一個根據(jù)模板快速創(chuàng)建工程的工具(命令)啦~。
參考
JavaScript ES6中export及export default的區(qū)別
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue中的數(shù)據(jù)監(jiān)聽和數(shù)據(jù)交互案例解析
這篇文章主要介紹了Vue中的數(shù)據(jù)監(jiān)聽和數(shù)據(jù)交互案例解析,在文章開頭部分先給大家介紹了vue中的數(shù)據(jù)監(jiān)聽事件$watch,具體代碼講解,大家可以參考下本文2017-07-07vue-cli下的vuex的簡單Demo圖解(實現(xiàn)加1減1操作)
這篇文章主要介紹了vue-cli下的vuex的簡單Demo(實現(xiàn)加1減1操作),本文圖文并茂給大家介紹的非常詳細(xì),具有參考借鑒價值,需要的朋友可以參考下2018-02-02vue大文件分片上傳之simple-uploader.js的使用
本文主要介紹了vue大文件分片上傳之simple-uploader.js的使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05vue+canvas實現(xiàn)數(shù)據(jù)實時從上到下刷新瀑布圖效果(類似QT的)
這篇文章主要介紹了vue+canvas實現(xiàn)數(shù)據(jù)實時從上到下刷新瀑布圖效果(類似QT的),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04