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

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

好，给大家看看我乱七八糟的代码和注释
【Vue使用学习Day6】webpack（Vue + Vue-Router）
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必须是functionreturn {
    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>