使用webpack一步一步構建Vue專案

2021-08-21 22:09:52 字數 1117 閱讀 4057

1、使用script標籤引入vue的包

3、通過new vue得到乙個vm的例項

在使用webpack構建vue專案前,要先對webpack基本用法及簡單的配置了解。

1、cnpm i vue -s    將vue安裝為執行依賴

2、在main.js檔案中匯入vue包  import vue from 'vue'

3、由於在webpack中,推薦使用.vue這個元件模板檔案定義元件,預設webpack無法打包.vue檔案,所以需要安裝能解析這種檔案的loader :cnpm i vue-loader vue-template-compiler -d

注意:vue-loader,15.*版本之後的版本的使用都需要新增plugin的配置

4、cnpm i style-loader css-loader -d 將解析轉換css的包安裝為開發依賴,因為.vue檔案中會寫css樣式

5、在webpack.config.js中配置規則

module: ,

]},

6、定義乙個.vue結尾的元件,其中元件有三部分組成: template script style

login.vue

7、使用import login from './login.vue' 在main.js中匯入這個元件

10、在vue中結合render函式渲染指定的元件到容器中

在利用webpack的vue專案中,在main.js中使用import vue from 'vue' 匯入的vue的包,功能不完善,只是提供了runtime-only的方式;所以,不能使用components元件的方式,向頁面中渲染元件

在webpack中,如果想要通過vue,把乙個元件放到頁面中去展示,vm例項中的render函式可以實現

// main.js 是專案的js入口檔案

import vue from 'vue';

import login from './login.vue';

var vm = new vue(,

render: c => c(login)

})

一步一步 Sql Azure

一步一步 sql azure 1.使用 windowsazure 平台賬號登陸 2.新建sqlazure server 3.新建資料庫 4.為sql azure server 新增防火牆規則,只有將本機新增到規則裡才能從本機連線到該sqlazure server 5.連線到sql azure ser...

一步一步學cscope

告之 1,我不喜歡寫部落格 因為感覺太浪費時間 2,部落格能記住自己某階段學過的東西,而這些東西可能會很快的忘卻 所以我以後要學著在部落格上浪費時間 前言 本文件記錄了我今天 2007 11 9 下午學習cscope的一點收穫,特收錄部落格以作分享。在學習cscope過程中查閱了大量的文件,但發現適...

走一步,再走一步

時光如梭,匆匆流逝的所有,讓我再一次懂得了,人生的時光門票,在不斷的穿梭過去和未來,也任光陰的手撫摸著這個現在,有太多的好像,早已和我的過去劃開了界限,無論悲傷的過往,還是美好而快樂過的曾經,都好像已經不重要了。重要的是,走一步,再走一步。這場在歲月裡一直奔跑的故事,和那始終無法為自己畫上成功圓滿的...