簡介：
vue-loader，來源于css-rouder、url-loader、html-loader…
后臺node.js–>require exports等都是基于模塊的開發
broserify 較早的模塊加載器，但是只能加載js
webpack，模塊加載器，一切東西皆模塊，最后打包到一起
vue-loader是基于webpack的 .vue文件 由vue-loader構成的，放置vue組件代碼

<template> // html </template><style> // css </style><script> // js (普通js代碼、ES6 需要通過babel-loader編譯成ES5) </script>

目錄結構

|-idnex.html |-main.js //入口文件 |-App.vue //vue文件 |-packge.json //工程文件（項目依賴，名稱，配置） 用npm init --yes生成 |-webpack.config.js //webpack配置文件

ES6：模塊化開發
導出模塊：export default {}
引入模塊：inport 模塊名稱 from 地址
webpack準備

cnpm install webpack cnpm install webpack-dev-server

---

腳手架vue-cli

// 安裝vue命令環境 npm install vue-cli -g // 確認是否安裝成功 vue --version

選擇腳手架

// 1. 安裝simple,不推薦 vue init simple 文件夾名 // 2. 安裝webpack(大型項目) 支持Eslint檢查代碼規范,單源測試 vue init webpack 文件夾名 // 3. 安裝webpack-simple(推薦) vue init webpack-simple 文件夾名

配置依賴

cd 文件目錄 npm install

測試運行

npm run dev

安裝vue-router

// i -> install // D -> --save-dev // S -> --save npm install vue-router --save

總結

以上是生活随笔為你收集整理的Vue入门 ---- vue-loader 、vue-cli的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。