vue的單檔案元件

五、單檔案元件

1. .vue檔案

.vue檔案由三部分組成：

template

>、<

style

、html

css

style

script

2. vue-loader

瀏覽器本身並不認為.vue檔案，所以必須對.vue檔案進行載入解析，此時需要vue-loader

類似的loader還有許多，如：html-loader、css-loader、style-loader、babel-loader等

需要注意的是vue-loader是基於webpack的

3. webpack

webpack是乙個前端資源模板化載入器和打包工具，它能夠把各種資源都作為模組來使用和處理

實際上，webpack是通過不同的loader將這些資源載入後打包，然後輸出打包後檔案

簡單來說，webpack就是乙個模組載入器，所有資源都可以作為模組來載入，最後打包輸出

[官網](

webpack版本：v1.x v2.x

webpack有乙個核心配置檔案：webpack.config.js，必須放在專案根目錄下

4. 示例，步驟：

4.1 建立專案，目錄結構如下：

webpack-demo

|-index.html

|-main.js 入口檔案

|-package.json 工程檔案

|-webpack.config.js webpack配置檔案

|-.babelrc babel配置檔案

4.3 安裝相關模板

cnpm install vue -s

cnpm install webpack -d

cnpm install webpack-dev-server -d

cnpm install vue-loader -d

cnpm install vue-html-loader -d

cnpm install css-loader -d

cnpm install vue-style-loader -d

cnpm install file-loader -d

cnpm install babel-loader -d

cnpm install babel-core -d

cnpm install babel-preset-env -d //根據配置的執行環境自動啟用需要的babel外掛程式

cnpm install vue-template-compiler -d //預編譯模板

合併：cnpm install -d webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler

4.4 編寫main.js

4.5 編寫webpack.config.js

4.6 編寫.babelrc

4.7 編寫package.json

4.8 執行測試

npm run dev


module.exports=,
// 配置模組載入器
module:,]}
}

1
10"keywords": ,
11"author": "",
12"license": "isc",
13"dependencies": ,
16"devdependencies": }
h2>
<
user
>
user
>
div>
template
>
<
script
>
import user from 
'./components/user.vue
'export 
default
},methods:
},components:,
}script
>
<
style 
scoped
>
body
style
> 
24"vue-style-loader": "^3.0.1",
25"vue-template-compiler": "^2.3.4",
26"webpack": "^3.0.0",
27"webpack-dev-server": "^2.5.0"28}
29 }

1
2//使用es6語法引入模組
3import vue from 'vue'45
new vue(
10 })

1
//babelirc2]
5]6 }

vue 單檔案元件

vue.js自定義的一種檔案格式 vue檔案，稱為單檔案元件，就是將html css js封裝在同乙個檔案內，從而實現了對乙個元件的封裝，乙個.vue 檔案就是乙個單獨的元件。1 編寫單檔案元件 vue結尾的檔案由3部分組成 html template css style js script ht...

vue單檔案元件

vue單檔案元件 vue單檔案元件就是把乙個頁面拆分成為多個多層次的元件。通過多層引用，大大縮小vue檔案的長度和頁面複雜度。步驟父元件 1.引入元件 import tabcard from components tabcard.vue 2.配置元件 export default 3.使用元件 ...

單檔案元件vue

定義乙個檔案名字是以.vue結尾，並且裡邊的內容就是乙個元件，這個檔案就稱作單檔案元件普通元件的缺點普通元件內容是和其它js 邏輯摻雜在一塊兒，不易維護，其優勢不容易發揮！x 乙個元件就是乙個vue例項的體現，template div容器部分 script vue例項部分 style 給d...

vue的單檔案元件

vue 單檔案元件

vue單檔案元件

單檔案元件vue

相關推薦