|
首先要理解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 webpack@4.25.0 webpack-cli -D // 也可以指定版本安装
这里就安装成功了
下面警告：
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9:
别管其他可能会出现，一个提示，就是设置那个"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 | 
转播
