Vue基礎學習7

2021-08-26 09:32:33 字數 956 閱讀 9272

webpack是乙個前端資源模組化載入器和打包工具,它能夠把各種資源作為模組來使用和處理,實際上,它是通過不同loader將這些資源載入之後打包的,然後輸出打包後的檔案。他就是乙個模組載入器。

1、通過npm init生成package.json檔案

需要對立面的一些節點進行修改

安裝相關模板

這裡是教程提供的一些基礎模板

最終完成後的package.json為:

2、配置webpack (配置webpack.config.js檔案)

這個要手動生成

3、編寫main.js ( main.js是入口檔案,webpack編譯會通過根目錄檔案打包到build.js)

手動生成

vue-cli快速腳手架搭建

vue-cli是構建單個網頁應用的腳手架,它本身整合了多種匡牧模板:

webpack:基於webpack,用的較多,包含eslint,unit等。

webpack-****** 基於webpack,更簡潔,無eslint,unit。

安裝步驟:

1、 安裝vue-cli,配置vue命令環境

npm install vue-cli –g

這裡需要好好看看需要的node版本的限制,用nvm去選擇合適版本的node,不然安裝不了

安裝好之後檢視腳手架:vue –v 檢視版本

2、 初始化專案

a) 構建專案

vue init webpack-****** vue-cli-demo

b) 進入專案並進行自動化安裝

cd vue-cli-demo

npm install

c) 執行專案

npm run dev

d) 打包上線

npm run build

在完成之後,我們就能獲得資料夾為:

之前在webpack腳手架搭建中需要手動寫的檔案,我們現在已經全部自動生成了。

Vue基礎學習

到公司第一天,把快遺忘的vue再看一遍官網的文件。vue.js是什麼?vue.js是一套用於構建使用者介面的漸進式框架。宣告式渲染 下面展示一些 new vue 結果hello vue 繫結元素attribute message 滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊 介紹 v bind attr...

vue基礎學習

vue.js基礎知識學習 vue.js起步 每個vue應用都需要通過例項化vue來實現。語法格式如下 var vm new vue methods data 用於定義屬性 methods 用於定義的函式 用於輸出物件屬性的函式返回值,及資料繫結 指令是帶有v 字首的特殊屬性。例如 v if v bi...

Vue學習筆記總結(7)

十三 vue物件的操作 1.可以通過乙個vue物件操作另外乙個vue物件 2.vue物件操作另乙個vue物件的內容,維度有兩個,操作屬性 操作方法。這些屬性是data或者computed裡面定義的屬性。3.vue的例項屬性 直接通過物件.的方式呼叫的屬性,是來自data或者computed中的屬性,...