美文网首页
边学边写webpack4 -- 加入vue

边学边写webpack4 -- 加入vue

作者: 迪迪妮粑粑 | 来源:发表于2019-11-13 15:03 被阅读0次
一、安装各种包

1.cnpm install vue --save (必须)
2.cnpm install vuex --save (非必须,单页应用全局状态管理)
3.cnpm install vue-router --save (非必须,如果不使用路由)
4.cnpm install vue-loader --save-dev (必须,否则无法编译.vue的文件)
5.cnpm install vue-template-compiler --save-dev (配合vue-loader,不装会报错)

vue-loader15.0后,必须在webpack.config.js中加入以下代码

var VueLoaderPlugin = require('vue-loader/lib/plugin');

plugins: [
  new VueLoaderPlugin()
]
二、项目文件

1.index.html 仅为渲染的html (配置在webpack的HtmlWebpackPlugin)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

2.enter.js 入口文件 (配置在webpack的entry)

import Vue from 'vue'
import App from './app'
// import vueRouter from 'vue-router'
import './static/css/main.css';
import "./static/scss/main.scss";
// Vue.use(vueRouter);

new Vue({
    el: '#root',  //挂载点
    // router,  // 路由
    //写法1
    // template: '<App/>', //模板
    // components:{
    //  App
    // }
    //写法2
    render: h => h(App)
});

3.App.vue 入口模板, 路由等具体代码放这里

<template>
        <!-- <router-view /> -->
    <div>{{abc}}</div>
</template>
<script>
    export default {
        data(){
            return {
                abc:123
            }
        },
        created(){
        }
    }
</script>
<style>
</style>

4.路由>>

相关文章

  • 边学边写webpack4 -- 加入vue

    一、安装各种包 1.cnpm install vue --save (必须)2.cnpm install vue...

  • 边学边写webpack4 -- 加入vue路由

    1.enter.js 入口文件 2.router/index.js,router/routes.js 路由目录 开...

  • 边学边写webpack4 -- 语法降级

    ES6降级ES5 cnpm install babel-loader babel-core babel-prese...

  • 边学边写webpack4 --基础部分

    以下内容参考借鉴此文https://www.jianshu.com/p/b7f3cbfa7287 安装node环境...

  • 边学边写webpack4 -- 各种加载器loader

    上文已经介绍了最基础部分,如有疑惑请再看上文 最简单的例子,边学边写webpack4 --基础部分 一、css-l...

  • 边学边写

    西双版纳原始森林公园地理位置: 西双版纳原始森林公园,位于景洪以东、澜沧江以北,距州府所在地8公里处,是全州离景洪...

  • 边学边写

    云南石林属于喀斯特地貌。喀斯特地貌是具有溶蚀力的水对可溶性岩石(大多为石灰岩)进行溶蚀作用等所形成的地表和地下形态...

  • 边写边学

    2018年7月6日,我的人生又多了一个角色-母亲。是的我当妈妈了,真的是一件特别开心和幸福的事情。 可是随着生活角...

  • 边看边学边写

    来简书的第33天,坚持日更的第17天。 其实我也就只会瞎写写,想到什么就写什么,有时候会东一句、西一句。就是凭着一...

  • 边写边学的Markdown之旅

    边写边学的Markdown之旅   为了提升自我的知识水平、书写水平、归纳总结水平,进而提高综合能力,这就学习了M...

网友评论

      本文标题:边学边写webpack4 -- 加入vue

      本文链接:https://www.haomeiwen.com/subject/lidsbctx.html