webpack中使用Vue开发

其他 2020-03-16 14:59:03 阅读次数: 0

Vue 在页面中渲染组件

使用基本方法渲染组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id='app'>
        <p>3333</p>
        <login></login>
    </div>


    <script>

        var login = {
            template: '<h1>这是登陆组件！</h1>'
        }

        // 创建 Vue 实例，得到ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
            components: {
                login
            }
        })
    </script>
</body>
</html>
  • 这儿是直接通过标签的形式将组件渲染上页面去的。

在页面中使用render渲染组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>

    <div id='app'>
        <p>4444</p>
    </div>


    <script>

        var login = {
            template: '<h1>这是登陆组件！</h1>'
        }

        // 创建 Vue 实例，得到ViewModel
        var vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {

            },
            render: function (createElements) { // createElements 是一个方法，调用它，能够把指定的组件模板渲染为 html 结构
                return createElements(login)
                // 注意：这里 return 的结果会替换页面中的 el 指定的哪个容器
            }
        })
    </script>

</body>
</html>
  • 这儿主要使用 VM 中的 render 对页面进行渲染。
  • render 渲染 el 指定的容器，会将整个 el 容器全部渲染.

webpack 复习

首先展示一个基础的webpack.config.js

// 由于 webpack 是基于node.js 进行构建的，所以：webpack的配置文件中所有合法的node代码都是支持的。
var path = require('path')
// 在内存中，根据指定的模板页面，生成一份在首页中，同时把打包好的bundle注入到页面底部
// 如果要配置插件，需要在到处的对象中，挂载一个plugins节点。
var htmlWebpackPlugin = require('html-webpack-plugin')

// 当以命令形式运行 webpack 或者 webpack-dev-server 的时候，工具会发现我们并没有提供要打包的入口和出口文件，此时 ，会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个配置对象，然后根据这个对象，进行打包构建。
module.exports = {
    mode: 'development',
    entry: path.join(__dirname,'./src/main.js'), // 项目的入口地址
    output: {
        // 指定输出选项。
        path: path.join(__dirname,'./dist'), // 输出路径
        filename:'bundle.js' // 指定输出文件的名称
    },
    plugins:[ // 所有 webpack 插件的配置节点
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'), // 指定模板的文件路径
            filename:'index.html' // 设置生成内存页面的名称
        })

    ],
    module:{ // 配置所有第三方 loader 模块的
        rules:[ // 第三方模块的匹配规则
            // cnpm i style-loader css-loader -D
            { test:/\.css$/,use:['style-loader','css-loader'] }, // 处理css 文件的loader
            // cnpm i less-loader less -D
            { test:/\.less$/,use:['style-loader','css-loader','less-loader'] }, // 处理less 文件的loader
            // cnpm i sass-loader node-sass sass fibers -D
            { test:/\.scss$/,use:['style-loader','css-loader','less-loader','sass-loader'] }, // 处理less 文件的loader
            // cnpm i url-loader file-loader -D
            { test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=246&name=[name].[ext]'}, // 处理土坯墙按路径的loader
            // limit 给定的值是图片的大小,单位是byte,如果我们引用的图片大于或者等于limit的值则不会转为base64格式的字符串,如果图片小于给定的limit的值,则会被转为base64格式的字符串
            // name=[hash:8]-[name].[ext] 在这儿是为了控制文件的名称,不发生变化,还有文件后缀.
            { test:/\.(ttf|eot|svg|woof|woof2)$/,use:'url-loader' }, // 处理字体文件
            { test:/\.js$/,use:'babel-loader',exclude:/node_modules/ }, //配置 Babel 来转换高级的ES语法
        ]
    }
}

其次是一个main.js

// 项目的JS入口文件
console.log('ok')

import './CSS/index.css'
import './CSS/index.scss'
// 注意:如果要通过路径的形式,引入node_modules中相关的文件,可以直接省略路径前边的node_modules这一层目录,直接写包的名称,然后跟上具体的文件路径.
// 不写 node_modules 这一层目录,默认就回去 node_modules 中去查找
// import 'bootstrap/dist/css/bootstrap.css'

// class 关键字是ES6中提供的新语法，用于实现ES6中面向对象变成的方式
class Person {
    // 使用 static 关键字，可以定义静态属性
    // 所谓的静态属性，就是可以直接通过类名，就可以访问的属性
    // 实例属性：只能通过类的实例，来访问的属性，叫做实例属性
    static info = { name:'zs', age:20}
}

// // 访问 Person 身上 info 属性
console.log(Person.info)
// 在webpack 中，默认只能处理一部分ES6的新语法，一些更高级的ES6语法或者ES7 语法，webpack 是处理不了的，这时候，就需要借助第三方的loader,来帮助 webpack 处理这些高级的语法，当第三方 loader 把高级语法转为低级语法之后，会把结果交给webpack 打包到bundle.js 中
// 通过Babel，可以将高级语法转为低级语法
// 1. 在 webpack 可以运行如下两套命令，安装两套包，去安装Babel 相关loader功能
// 1.1 第一套包：cnpm i babel-core@6 babel-loader@7 babel-plugin-transform-runtime@6 -D
// 1.2 第二套包：cnpm i babel-preset-env babel-preset-stage-0 -D
// 2. 打开webpack 的配置文件（webpack.config.js）,在 module 节点下的 rules 数组中，添加一个新的匹配规则：
// 2.1 { test:/\.js$/,use:'babel-loader',exclude:/node_modules/ }
// 2.2 注意：在配置 babel 的 loader 规则的时候，必须报 node_modules 目录，通过 exclude 选项排除掉，原因有两个：
// 2.2.1 如果不排除 node_modules ，则 Babel 会把 node_modules 中所有第三方 JS 文件都打包编译，这样会非常消耗CPU，同时，打包速度非常慢；
// 2.2.2 哪怕，最终 Babel 把所有 node_modules 中的 JS 转化完毕了，但是项目也无法正常运行！
// 3. 在项目的根目录中，新建一个叫做 .babelrc 的 babel 配置文件，这个配置文件属于 JSON 格式，所以：在      .babelrc配置的时候必须符合 JSON 语法规范，不能写注释，字符串必须用双引号
// 3.1 在 .babelrc 写如下配置：     presets :语法的意思
        // {
        //     "presets": ["env","stage-0"],
        //     "plugins": ["transfrom-runtime"]
        // }
// 4. 目前我们安装的是 babel-preset-env 是比较新的ES语法插件，之前，我们安装的是 babel-preset-es2015，现在出现了新的语法插件 babel-preset-env ，它包含了所有和 es*** 相关的语法

// ****************************************************************
        // Day 6_06 P108 Babel 安装可能会报错 babel-loader和babel-core版本不对应
        // babel-loader 8.x对应babel-core 7.x
        // babel-loader 7.x对应babel-core 6.x
        // 如果安装的是babel-loader 8.x 请卸载旧的babel-core、babel-plugin
        // npm un babel-core
        // npm un babel-plugin-transform-runtime

        // 安装
        // npm i -D @babel/core
        // npm install --save-dev @babel/plugin-transform-runtime
        // npm install --save @babel/runtime

        // 如果第二套包也安装了 同样先卸载
        // npm un babel-preset-env
        // npm un babel-preset-stage-0

        // 安装新的
        // npm i @babel/preset-env
        // npm i babel-preset-mobx然后修改。babelrc文件
        // {
        // "presets": ["@babel/preset-env", "mobx"],
        // "plugins": [
        // "@babel/plugin-transform-runtime"
        // ]
        // }
// ****************************************************************




// java C# 实现面向对象的方式一样   class 是从后端语言中借鉴过来的，来实现面向对象
// var p1 = new Person()


// function Animal(name){
//     this.name = name
// }

// Animal.info = 123

// var al = new Animal('笑话')


// 这是静态属性：
// console.log(Animal.info)
// 这是实例属性：
// console.log(al.name)

webpack的处理路径

module.exports = {
    mode: 'development', // 这里是生产的模式
    entry: path.join(__dirname,'./src/main.js'), // 项目的入口地址
    output: {
        // 指定输出选项。
        path: path.join(__dirname,'./dist'), // 输出路径
        filename:'bundle.js' // 指定输出文件的名称
    },
}

Babel-loader

在webpack 中，默认只能处理一部分ES6的新语法，一些更高级的ES6语法或者ES7 语法，webpack 是处理不了的，这时候，就需要借助第三方的loader,来帮助 webpack 处理这些高级的语法，当第三方 loader 把高级语法转为低级语法之后，会把结果交给webpack 打包到bundle.js 中
通过Babel，可以将高级语法转为低级语法
1. 在 webpack 可以运行如下两套命令，安装两套包，去安装Babel 相关loader功能
1.1 第一套包：cnpm i babel-core@6 babel-loader@7 babel-plugin-transform-runtime@6 -D
1.2 第二套包：cnpm i babel-preset-env babel-preset-stage-0 -D
2. 打开webpack 的配置文件（webpack.config.js）,在 module 节点下的 rules 数组中，添加一个新的匹配规则：
2.1 { test:/\.js$/,use:'babel-loader',exclude:/node_modules/ }
2.2 注意：在配置 babel 的 loader 规则的时候，必须报 node_modules 目录，通过 exclude 选项排除掉，原因有两个：
2.2.1 如果不排除 node_modules ，则 Babel 会把 node_modules 中所有第三方 JS 文件都打包编译，这样会非常消耗CPU，同时，打包速度非常慢；
2.2.2 哪怕，最终 Babel 把所有 node_modules 中的 JS 转化完毕了，但是项目也无法正常运行！
3. 在项目的根目录中，新建一个叫做 .babelrc 的 babel 配置文件，这个配置文件属于 JSON 格式，所以：在      .babelrc配置的时候必须符合 JSON 语法规范，不能写注释，字符串必须用双引号
3.1 在 .babelrc 写如下配置：     presets :语法的意思
        {
            "presets": ["env","stage-0"],
            "plugins": ["transfrom-runtime"]
        }
4. 目前我们安装的是 babel-preset-env 是比较新的ES语法插件，之前，我们安装的是 babel-preset-es2015，现在出现了新的语法插件 babel-preset-env ，它包含了所有和 es*** 相关的语法
********************************************************************
6. Day 6_06 P108 Babel 安装可能会报错 babel-loader和babel-core版本不对应 
        babel-loader 8.x对应babel-core 7.x
        babel-loader 7.x对应babel-core 6.x
        如果安装的是babel-loader 8.x 请卸载旧的babel-core、babel-plugin
        npm un babel-core
        npm un babel-plugin-transform-runtime

        安装新的
        npm i -D @babel/core
        npm install --save-dev @babel/plugin-transform-runtime
        npm install --save @babel/runtime

        如果第二套包也安装了 同样先卸载
        npm un babel-preset-env
        npm un babel-preset-stage-0

        安装新的
        npm i @babel/preset-env
        npm i babel-preset-mobx
        然后修改   .babelrc文件
        {
        "presets": ["@babel/preset-env", "mobx"],
        "plugins": [
        "@babel/plugin-transform-runtime"
        ]
        }
7. 总结如下：
	1）. 需要这些插件：@babel/core    @babel/plugin-transfrom-runtime    @babel/runtime
    	@babel/preset-env    babel-preset-mobx
    2). 因为版本的更新，上面的注释就只能当作理解的一个参考，具体插件的使用还是安装第6点的内容。

webpack中使用Vue开发

在 webpack 中尝试使用 Vue：
1. 安装：cnpm i vue -D
2. 在 webpack 中，使用 import Vue from 'vue'导入的 Vue 构建函数，功能不完善，只提供了 runtime-only 的方式，并没有提供像网页中那样的使用方式
3. import Vue from 'vue' // 使用的时候必须在 webpack.config.js 文件中配置 resolve alias
3.1 在webpack.config.js中配置
		module.exports = {
		resolve:{
        alias: { // 修改 vue 被导入时候的包的路径
            // "vue$": "vue/dist/vue.js"
        }
    	}
		}
4. import Vue from '../node_modules/vue/dist/vue.js' // 这种方式可以直接使用

在 Node 中包的查找规则

1. 查找项目的根目录中有没有 node_modules 的文件夹
2. 在 node_modules 中根据包名，找对应的 vue 文件夹
3. 在 vue 文件夹中，找一个叫做 package.json 的包配置文件
4. 在 package.json 文件中，查找一个 main 属性【main 属性指定了这个包在被加载的时候的入口文件】

webpack中使用 .vue 使用（导入）组件

默认 webpack 无法打包 .vue 文件，需要安装相关的 loader
1. cnpm i vue-loader vue-template-compiler -D
2. 在配置文件中，新增 loader 配置项 { test:/\.vue$/,use:'vue-loader' }
3. 不仅这样，还需要在webpack.config.js中：var VueLoaderPlugin = require('vue-loader/lib/plugin');
4. 还需要在 plugins 中：new VueLoaderPlugin()

总结

1. 安装 vue 的包： cnpm i vue -s
2. 由于在 webpack 中，推荐使用 .vue 这个组件模板来定义组件，所以，需要安装能解析这种文件的 loader			cnpm i vue-loader vue-template-complier -D
3. 在 main.js 中，导入 vue 模块 import Vue from 'vue'
3.1 这儿需要在webpack.config.js 中配置相关参数
4. 定义一个 .vue 结尾的组件，其中组件由三部分组成：template script style
5. 使用 import login from './login.vue' 导入这个组件中
6. 创建 vm 的实例 var vm = new Vue ({ el:'#app',render :c => c(login)})
7. 在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实力要控制的区域；

向外暴漏成员

在 Node 中
1. var 名称 = require('模块标识符')
2. module.exports = {} 和 exports 来暴漏成员
在 ES6 中
1. 在 ES6 中导入模块，使用：    import 模块名称 from '模块标识符'       import '表示路径'
2. 在 ES6 中，使用 export default 和 export 向外暴漏成员；
3. ！！！注意使用export default向外暴漏成员：
3.1 export default 向外暴漏成员，可以使用任意的变量来接收
3.2 在一个模块中，export default 只允许向外暴漏一次
3.3 在一个模块中，同时可以使用 export default 和 export 向外暴漏成员
4. ！！！注意使用 export 向外暴漏成员：
4.1 使用 export 向外暴漏成员，只能使用 { } 的形式来接收，这种形式，叫做 【按需导出】
4.2 export 可以向外暴露多个成员，同时，如果某些成员，我们在  import  的时候，不需要则可以不在 {} 定义
4.3 使用 export 导出的成员，必须严格按照导出时候的名称，来使用 {} 按需接收;
4.4 使用 export 导出的成员，如果想换个名称来接收，可以使用 as 来起别名；

路由的嵌套

使用VueRouter前提条件,这部分在main.js中实现

import Vue from ‘vue’
// 1. 导入 vue-router 包
import VueRouter from ‘vue-router’
// 2. 手动安装 VueRouter
Vue.use(VueRouter)

router.js的建立

// 1. 导入 vue-router 包，这儿必须导入
// 因为每个文件都是互相独立的，必须有自己内部使用的文件的导入，不然就直接失败了。
import VueRouter from 'vue-router'


// 导入 Account 组件
import account from './main/Account.vue'
// 导入 GoodsList 组件
import goodslist from './main/GoodsList.vue'

// 导入 Account 的两个子组件
import login from './subcom/login.vue'
import register from './subcom/register.vue'


// 3. 创建路由对象
var router = new VueRouter({
	routes: [
		// account goodslist
		{
			path: '/account',
			component:account,
			children: [
				{ path:'login',component:login },
				{ path:'register',component:register },
			]
		},
		{ path: '/goodslist',component:goodslist }
	]
})


// 把路由对象暴漏出去
export default router

main.js的建立

import Vue from 'vue'
// 1. 导入 vue-router 包
import VueRouter from 'vue-router'
// 2. 手动安装 VueRouter ，这儿必须安装。
Vue.use(VueRouter)


// 导入 app 组件
import app from './app.vue'

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



var vm = new Vue({
	el:'#app',
	render: c => c(app), // render 会把 el 指定的容器中，所有的内容都清空覆盖，所以不要把路由的 router-view 和 router-link 直接写到 el 所控制的元素中去
	router // 4. 将路由对象挂载到 vm 上
})

// 注意：App 这个组件是通过 VM 实例的 render 函数渲染出来的，render 函数如果要渲染组件，渲染出来的组件只能放到 el : '#app' 所指定的 元素中；
// Account 和 GoodsList 组件，是通过路由监听到的，所以这两个组件，只能展示到属于路由的 <router-view></router-view> 中去；

子路由中样式的使用

<style lang="scss" scoped>
// 普通的 style 标签只支持 普通的样式，如果想要启用 less 或 scss ,需要为 style 元素，这是 lang  属性
// 只要 我们的 style 标签，是在 .vue 组件中定义的，那么推荐为 style 开启 scoped 属性
// scoped 属性，就是将以下的样式向下运用，不会改变上一级目录中的相关文件的样式。
	body{
		div{
			font-style: italic;
		}
	}
</style>

.vue文件结构

这儿的 .vue 文件就是类似于一个组件，然后组件里面可以使用相关的数据以及方法

<template>
	<div>

		<h1>这是登录组件，使用 .vue 文件定义出来的 --- {{msg}}</h1>

	</div>
</template>

<script>
export default {
	data(){ // 注意：组件中的 data 必须是 function 
		return {
			msg:'123'
		}
	},
	methods:{
		show(){
			console.log('调用了 login.vue 中的 show 方法')
		}
	}
}
</script>

<style>
</style>
菜先生…
发布了78 篇原创文章 · 获赞 6 · 访问量 6551
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_44181400/article/details/104258949
今日推荐
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
虽然老乡鸡开源的不是代码，但背后的原因却让人很暖心
周排行
决策树的部分理解
STM32软件IIC的实现
RocketMQ原理解析-HA
vue-动态路由（路由的传参和接参）
利用python对Excel中的特定数据提取并写入新表
【Ubuntu】 Ubuntu16.04搭建NFS服务
Elasticsearch基础操作与对应的curl命令行，python对接实现
JVM数据存储结构 & Java的值传递和址传递
yum命令使用指南
java基础（一）：java语法基础
每日归档
更多
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022