【Vue使用学习Day6】webpack（Vue + Vue-Router）

最新推荐文章于 2020-05-21 19:23:33 发布

竭鱼

最新推荐文章于 2020-05-21 19:23:33 发布

阅读量159

点赞数

分类专栏：妈妈我想用Vue 文章标签： vue webpack vue.js javascript

本文链接：https://blog.csdn.net/qq_34924101/article/details/104636872

版权

妈妈我想用Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

用webpack就只能把文件全丢上来叻(难道你以前不是吗
(bundle.js和package-lock.json这里没写)
weback的使用见笔记

好，给大家看看我乱七八糟的代码和注释
在这里插入图片描述
webpack.config.js

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


module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { test: /\.vue$/, use: 'vue-loader' },
            { test:/\.(png|jpg|jepg|svg)$/, use:[ { loader:'url-loader' ,
                    options: {limit:1024, name:'images/[name][hash].[ext]'}}]
            },
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ],
    resolve: {
        alias: { "vue$": "vue/dist/vue.js"}
    }
}

package.json

{
  "name": "webpackVue1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack-dev-server --open --contentBase dist --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.4.2",
    "file-loader": "^5.1.0",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "style-loader": "^1.1.3",
    "vue": "^2.6.11",
    "vue-loader": "^15.9.0",
    "vue-router": "^3.1.6",
    "vue-template-compiler": "^2.6.11"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>webpack(vue+vue-router)</title>
    </head>
    <body>
        <div id="box">
            <h1>hhhhhh{{msg}}</h1>
            <account></account>
        </div>
        <script src="bundle.js"></script>
    </body>
</html>

main.js

import Vue from 'vue'

//使用vue-router,导包
import VueRouter from 'vue-router'
Vue.use(VueRouter) //使vue和vue-router建立联系

import account from './components/Account.vue'

//导入路由模块
import router from './router.js'

var vm = new Vue({
    el: '#box',
    data: {
        msg: 'wwwwww'
    },
    components: {
        account
    },
    // render: function (createElements) {
    //     return createElements(account)
    // },
    // render: c => c(login)
    router
})
//ES6中导入模块使用 import 模块名称 from 模块标识符
//导入样式直接 import ‘路径’
//甚至还可以改名(指 export出来的成员，改名用as
import UK, {US as USA} from './test'
console.log(UK)
console.log(USA)

router.js

//使用vue-router,导包
import VueRouter from 'vue-router'

import login from './components/login.vue'
import register from './components/register.vue'
import password from "./components/password.vue"


var router = new VueRouter({
    routes: [
        {path: '/login',
            component: login,
            children: [
                {path: 'password', component: password}
            ]},
        {path: '/register', component: register}
    ]
})
export default router

test.js

//在ES6中使用 export和 export default向外暴露成员
//一个模块中export和 export default可以同时使用
//但 export default只允许向外暴露一次

//node中和ES6暴露成员和导入的方法不同，最好一一对应
export default  {
    name: 'AK',
    age: '23'
}

//使用 export暴露的成员只能使用{}接收,可以暴露多个，按需导出
export var US = {
    name: 'AFJ',
    age: '19'
}

组件们有的删除了默认的，没使用的script和style标签
Account.vue

<template>
    <div>
        <h1>我是.vue的组件组件组件account--{{msg}}</h1>

        <router-link to="/login">login</router-link>
        <router-link to="/register">register</router-link>
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        data() {//组件中的data必须是function
            return {
                msg: 'hhhhh'
            }
        },
        methods: {
           show() {
               console.log("balbalbalbal")
           }
        }

    }
</script>

<template>
    <div>
        <h1>login</h1>
        <router-link to="/login/password">password</router-link>
        <router-view></router-view>
    </div>
</template>

<template>
    <div>
        <h1>register</h1>
    </div>
</template>

password.vue

<template>
    <h1>password</h1>
</template>

<style scoped>
    /*scoped 实现组件的私有化，不对全局造成样式污染*/
    h1 {
       color: #96d1c7;
    }
</style>

竭鱼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Vue使用学习Day6】webpack（Vue + Vue-Router）

用webpack就只能把文件全丢上来叻(难道你以前不是吗(bundle.js和package-lock.json这里没写)好，给大家看看我乱七八糟的代码和注释webpack.config.jsconst path = require('path');const VueLoaderPlugin = require('vue-loader/lib/plugin');module.ex...
复制链接

扫一扫