node搭建webpack+vue

最新推荐文章于 2022-11-15 11:36:42 发布

小黑雷

最新推荐文章于 2022-11-15 11:36:42 发布

阅读量232

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/u010757785/article/details/90716807

版权

前端专栏收录该内容

33 篇文章 0 订阅

订阅专栏

首先要理解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

小黑雷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node搭建webpack+vue

首先要理解webpack和vue是单独的，还有vue-cli只是封装webpack让你更加便捷，就类适于wamp封装了apache+php+mysql一样。当然这个举例并不是特别好。下面开始表演1：webpack的安装标注：你安装可能直接在项目里面，联合后端一起开发，反正你进入到哪路文件夹下就好：单纯的web开发，那就mkdir webpack-demo...
复制链接

扫一扫