Vue學(xué)習(xí)筆記進(jìn)階篇之vue-cli安裝及介紹
介紹
Vue-cli是Vue的腳手架工具
主要作用:目錄結(jié)構(gòu)、本地調(diào)試、代碼部署、熱加載、單元測試
地址:https://github.com/vuejs/vue-cli
安裝
全局安裝vue-cli
npm install -g vue-cli
當(dāng)然了,要想使用npm工具,就必須安裝Node.js,node.js的安裝方法這里就不做介紹了。
安裝完成后,在終端輸入以下命令, 可以查看vue的版本:vue -V
輸入以下命令,可以查看官方提供的模板:
vue list
我們可以看到,vue官方提供了6個(gè)模板,我們這邊主要使用webpack模板。
那么,什么是webpack呢?請看以下介紹:
WebPack可以看做是模塊打包機(jī):它做的事情是,分析你的項(xiàng)目結(jié)構(gòu),找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言(Scss,TypeScript等),并將其打包為合適的格式以供瀏覽器使用。
創(chuàng)建項(xiàng)目
創(chuàng)建項(xiàng)目的命令:
vue init <template-name> <project-name>
template-name
為模板名稱,例如上面vue list命令查到的模板的模板名稱都可以使用。
project-name
就是你自己創(chuàng)建的項(xiàng)目名稱了,自己隨便定義,但是不能為中文。
下面,我們就用上述命令來創(chuàng)建一個(gè)自己的項(xiàng)目,首先中終端通過cd命令,進(jìn)入你所需要?jiǎng)?chuàng)建項(xiàng)目所在的目錄,然后執(zhí)行以下命令:
vue init webpack my-demo1
在創(chuàng)建的過程中,會有一些項(xiàng)目信息和配置要自己填寫,比如項(xiàng)目名稱,項(xiàng)目描述,項(xiàng)目介紹等,后面還有幾個(gè)要自己選擇y/n的,我這邊暫時(shí)都選擇了n,因?yàn)槟壳拔覀冞€用不到這些東。然后根據(jù)提示,依次鍵入以下命令:
cd my-demo1 npm install npm run dev
這三個(gè)命令是干嘛用的呢?
cd my-demo1:
這個(gè)命令當(dāng)然就是進(jìn)入我們的項(xiàng)目目錄了。
npm install:
這個(gè)命令是用來安裝項(xiàng)目的依賴項(xiàng)的,我們可以看到我們創(chuàng)建的項(xiàng)目中有這個(gè)文件package.json,這個(gè)文件的作用就是用來配置項(xiàng)目的依賴項(xiàng)的,而這個(gè)命令就負(fù)責(zé)安裝這個(gè)配置文件里已經(jīng)配置的項(xiàng)目,執(zhí)行完成后項(xiàng)目目錄會多個(gè)node_modules文件夾。
npm run dev:
這個(gè)命令是用來運(yùn)行項(xiàng)目的,這是個(gè)熱加載的運(yùn)行方式,只有修改了項(xiàng)目會立即更新到瀏覽器的。
除了上面的3個(gè)命令,還有個(gè)比較重要的命令:
npm run build
這個(gè)會生成靜態(tài)文件,在根目錄的dist里,里面有個(gè)index.html,這是服務(wù)器訪問的路徑指定到這里就可以訪問我們自己的項(xiàng)目了。
項(xiàng)目目錄介紹
項(xiàng)目目錄結(jié)構(gòu)如上圖
- build config 這兩個(gè)目錄是webpack以及node服務(wù)器的配置。
- node_modules 這個(gè)目錄是npm install命令執(zhí)行后按照的依賴項(xiàng)所在目錄。
- src 是用來存放項(xiàng)目代碼的,我們的編碼也都是在這個(gè)目錄里進(jìn)行的。
- .babelrc babel配置文件,把我們ES2105的代碼通過它編譯成ES5的。
- .editorconfig編輯器配置。
- .eslintignore 忽略語法檢查的目錄文件配置。
- .eslintrc.jseslint的配置文件。
- .gitignore配置Git倉庫的忽略。
- index.html項(xiàng)目入口模板文件。
- package.json node配置文件
運(yùn)行項(xiàng)目
上面說到我們運(yùn)行項(xiàng)目的命令是:
nmp run dev
下面我們就執(zhí)行一下,看下結(jié)果:
這個(gè)端口號我們也是可以修改的,它是在config/index.js文件下配置的。
只有修改這個(gè)地方,然后重新運(yùn)行就好了。
另外,我們再看看這個(gè)npm run dev
和npm run build
中的dev和build是個(gè)什么東西。
其實(shí)這個(gè)就是在package.json
中配置的一個(gè)腳本:
如果大家熟悉nodejs的話,肯定一看就明白了,不過這些就算不明白,也不影響我們的vue的學(xué)習(xí)。
單文件組件
src/component目錄是用來存放我們自己的組件的,可以看見,這里的組件是以.vue為后綴的單文件組件,一個(gè)文件就是一個(gè)組件。我把Hello.vue文件簡化后,得到以下代碼:
<template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } </style>
這里面包含了,模板-即<template>標(biāo)簽的內(nèi)容,js-即<script>標(biāo)簽的內(nèi)容,和樣式-即<style>標(biāo)簽的內(nèi)容,在<style>里有個(gè)scoped屬性,這個(gè)的意思就是這個(gè)樣式僅在當(dāng)前組件內(nèi)有效果,如果沒有這個(gè)屬性,則這個(gè)樣式就是全局的,會影響到其他組件的樣式,所以這個(gè)一定要根據(jù)情況而定。
另外,如果想在我們的項(xiàng)目中引用其他的js, 或css 我們可以在根目錄的index.html文件中添加,這樣全局都可以使用的。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
實(shí)現(xiàn)一個(gè) Vue 吸頂錨點(diǎn)組件方法
這篇文章主要介紹了實(shí)現(xiàn)一個(gè) Vue 吸頂錨點(diǎn)組件方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07vue2.0使用Sortable.js實(shí)現(xiàn)的拖拽功能示例
本篇文章主要介紹了vue2.0使用Sortable.js實(shí)現(xiàn)的拖拽功能示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-02-02Vue導(dǎo)入Echarts實(shí)現(xiàn)折線圖
這篇文章主要給大家介紹了關(guān)于vue+echarts實(shí)現(xiàn)折線圖的方法與注意事項(xiàng),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-12-12vue組件中點(diǎn)擊按鈕后修改輸入框的狀態(tài)實(shí)例代碼
要求點(diǎn)擊修改按鈕之后部分輸入框由禁用狀態(tài)變?yōu)榭捎脿顟B(tài)。下面我給大家分享一段實(shí)例代碼基于vue組件中點(diǎn)擊按鈕后修改輸入框的狀態(tài),需要的的朋友參考下2017-04-04vue-video-player 通過自定義按鈕組件實(shí)現(xiàn)全屏切換效果【推薦】
這篇文章主要介紹了vue-video-player,通過自定義按鈕組件實(shí)現(xiàn)全屏切換效果,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08