首先要理解webpack和vue是單獨的，還有vue-cli只是封裝webpack讓你更加便捷，就類適於wamp封裝了apache+php+mysql一樣。當然這個舉例並不是特別好。
下面開始表演
1：webpack的安裝
標註：你安裝可能直接在項目裏面，聯合後端一起開發，反正你進入到哪路文件夾下就好：
單純的web開發，那就
mkdir webpack-demo
進入到項目文件夾下：
npm init// 生成package.json
// 可以在package.json加入一行"private": true 說明項目爲私有，不會發布到npm庫
知識普及：npm install 和 npm i 是一樣 --save 和 -S 是一樣 --save-dev 和 -D 是一樣的
--save-dev存在package.json的devDependencies這個裏面，而--save則會將包名稱及版本號放在dependencies裏面。
延伸：dependencies是運行時依賴，devDependencies是開發時的依賴。
npm info webpack //查看webpack歷史版本
npm install webpack webpacl-cli -D // 會生成node_modules文件夾 安裝最新的穩定版推薦
npm install [email protected] webpack-cli -D // 也可以指定版本安裝
這裏就安裝成功了
下面警告：
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]:
別管其他可能會出現，一個提示，就是設置那個"private": true
測試安裝：
在項目下面新建一個兩個文件夾：dist，src兩個文件webpack.config.js，index.html
webpack文檔地址：https://www.webpackjs.com/concepts/
webpack.config.js ：
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',//值可以是字符串、數組或對象
mode: 'development',
output: {
path: path.resolve(__dirname, './dist'),//Webpack結果存儲
publicPath: './',//然而“publicPath”項則被許多Webpack的插件用於在生產模式和開發模式下下更新內嵌到css、html，img文件裏的url值
},
module: {
rules: [
]
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="appIndex">
</div>
<script src="./dist/main.js"></script>
</body>
</html>
webpack.config.js裏面看到有entry: './src/main.js'
所以在src裏面新建：main.js
var a="helloword es5";
console.log("1:"+a);
修改 package.json裏面的
"serve": "webpack ./src/main.js --config ./webpack.config.js",
這裏webpack完成了，運行
webpack //全局安裝的項目目錄下運行該命令打包
node_modules/.bin/webpack //項目內安裝 node_modules目錄.bin目錄下調用webpack打包
瀏覽器打開該index.html
vue安裝
npm install babel-loader --save-dev
npm install babel-preset-env --save-dev
npm install babel-core --save-dev
npm install css-loader@* vue vue-loader --save-dev
裏面還有一個庫vue-template-compiler，因爲打包報錯遇到的看自己需要後面會提到
測試：
webpack.config.js修改
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',//值可以是字符串、數組或對象
mode: 'development',
output: {
path: path.resolve(__dirname, './dist'),//Webpack結果存儲
// filename: "js/[name].[hsah:8].js",
chunkFilename: "js/[name].[hsah:8].js",
publicPath: './',//懵懂，懵逼，//然而“publicPath”項則被許多Webpack的插件用於在生產模式和開發模式下下更新內嵌到css、html，img文件裏的url值
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin()
]
}
main.js
var a="helloword es5";
console.log("1:"+a);
let b=`helloword
es6`;
console.log("2:"+a+b);
let c="helloword\
es62";
console.log("3:"+a+b+c);
console.log(['a', 'b', 'c', 'd'].includes('b', 1) );
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: "#appIndex",
render:h=>h(App)
});
在src下面新建目錄
App.vue
<template>
<div>{{msg}}</div>
</template>
<script>
export default {
name: "App",
data(){
return {
'msg': 'HELLO WORD vue'
}
}
}
</script>
<style scoped>
</style>
在直接打包：
可能失敗：
1：
npm install vue-template-compiler --save-dev
修改webpack.config.js在裏面加一行
const { VueLoaderPlugin } = require("vue-loader")
2：還有可能報錯：
import Vue from 'vue'報錯，Uncaught SyntaxError: Unexpected identifier但是找不出
解決方法，1：首先看node_modules都是是否有vue,
2：再看vue是否有
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.Vue = factory());
}(this, function () { 'use strict';
3：
webpack.config.js文件module下面rules裏面是否有.vue一級相關的
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
4：粗心導致
看 index.html裏面的id是否和
new Vue({
el: "#appIndex",
render:h=>h(App)
});
裏面的 el: "#appIndex",是否一樣
這就在解決了在打包
後面在傢什麼scss什麼vue-resource等直接安裝就夠
node卸載npm un 組件名稱 或者npm uninstall 組件名稱
vue-resource：https://www.jianshu.com/p/1f552358f54a
vue-resource:安裝
npm i vue-router --save
在src下面創建模板文件，這裏在src下面創建home.vue和user/login.vue
home文件：
<template>
<div>
<h3>我是首頁</h3>
<div><button @click="jump">跳轉user頁面</button></div>
</div>
</template>
<script>
export default {
name: "home",
data() {
return {};
},
methods: {
jump() {
this.$router.push("/user/login");
}
}
};
</script>
<style scoped>
</style>
user/login.vue
<template>
<div>
<h3>登錄</h3>
<div><button @click="jump">跳轉home頁面</button></div>
</div>
</template>
<script>
export default {
name: "login",
data() {
return {};
},
methods: {
jump() {
this.$router.push("/home");
}
}
};
</script>
<style scoped>
</style>
在src下面新建：
router.js
// router 內容
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import App from './App.vue';
import Home from './views/home.vue';
import Login from './views/user/login.vue';
export default new VueRouter({
routes: [{
path: '/',
component: App,
children: [
{ path: '/', redirect: '/home' },
{ path: '/home', meta: { title: '首頁' }, component: Home },
{ path: '/user/login', meta: { title: '登錄' }, component: Login }
]
}]
});
修改main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
console.warn('start test...');
new Vue({
el: "#appIndex",
router,
render:h=>h(App)
});
最後去掉App.vue裏面內容
<template>
<router-view></router-view>
</template>
在打包一下就可以看到下面效果
demo地址：https://gitee.com/adminstart/laravel58_vue_webpack_vue-router
如果只需要腳手架，在public文件夾下 template1.2.1
入口文件index.html
見文章上面：測試安裝-》index.html