前端與移動開發之vue-day6(1)
阿新 • • 發佈:2018-11-21
注意:
有時候使用npm i node-sass -D裝不上,這時候,就必須使用 cnpm i node-sass -D
在普通頁面中使用render函式渲染元件在webpack中配置.vue元件頁面的解析
執行cnpm i vue -S將vue安裝為執行依賴;
執行cnpm i vue-loader vue-template-compiler -D將解析轉換vue的包安裝為開發依賴;
執行cnpm i style-loader css-loader -D將解析轉換CSS的包安裝為開發依賴,因為.vue檔案中會寫CSS樣式;
在webpack.config.js中,新增如下module規則:
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.vue$/, use: 'vue-loader' }
]
}
建立App.js元件頁面: <template> <!-- 注意:在 .vue 的元件中,template 中必須有且只有唯一的根元素進行包裹,一般都用 div 當作唯一的根元素 --> <div> <h1>這是APP元件 - {{msg}}</h1> <h3>我是h3</h3> </div> </template>
<script>
// 注意:在 .vue 的元件中,通過 script 標籤來定義元件的行為,需要使用 ES6 中提供的 export default 方式,匯出一個vue例項物件
export default {
data() {
return {
msg: 'OK'
}
}
}
</script>
<style scoped>
h1 {
color: red;
}
</style>
建立main.js入口檔案:
// 匯入 Vue 元件
import Vue from 'vue' // 匯入 App元件 import App from './components/App.vue' // 建立一個 Vue 例項,使用 render 函式,渲染指定的元件 var vm = new Vue({ el: '#app', render: c => c(App) });