这篇博客详细记录了Vue学习的第六天内容，涵盖了Webpack的配置与使用，包括项目的初始化、打包配置、webpack-dev-server的安装。接着介绍了样式引入处理，如style-loader和css-loader的安装与应用。还涉及到Babel的学习，讲解了如何配置.babelrc文件以及安装相关包。此外，博主探讨了Vue的render函数和在Webpack中结合Vue的步骤，强调了Vue-Loader和Vue-Template-Compiler的安装及Vue文件中定义数据和方法的ES6规范。最后提到了Vue-Router的配置，包括子路由的创建和使用scoped和lang属性为style指定私有样式。
Vue 学习 第六天学习笔记
1.webpack 使用复习
第一步：先建立文件夹。
第二步，用webpack将其初始化，建立管理。npm 的包管理工具管理起来，
npm init -y .注意{ 查看自己敲命令时所在的目录，是不是这个工作目录}
第三步，建立文件夹和初始化文件
dist
src ( css js , images , index.html , main.js ).然后在里面写入一下测试内容
第四步，进行打包 webpack .\src\main.js .\dist\bundle.js
第五步，以为手动打包麻烦，因此需要进行相关配置，webpack-dev-server
那么就需要安装相关的包。【注意版本】
npm i webpack-dev-server@2.9.1 -D
但是需要本地安装webpack
第六步。建立一个配置文件，webpack.config.js
第七步，项目本地安装wepack. npm i webpack@3.6.0 -D
第八步，配置相关文件，
var path = require(‘path’);
module.exports = {
entry : path.join(__dirname,’./src/main.js’), //入口文件
output : //出口文件
{
path: path.join(__dirname,’./dist’),
filename: ‘bundle.js’
}
}
第九步：配置html-webpack-plugin 内存页面
2. 样式引入处理
2.1先编写样式文件，
2.2 倒入相关包 npm i style-loader@0.18.1 -D npm i css-loader@0.28.3 -D
3.bable 学习
1.添加包
2. 添加规则
3. 在项目根目录下，加一个.babelrc 的babel 配置文件
//在webpack 中，只能处理一部分的ES6 语法，有些处理不了，需要借助第三方 loader,b帮助webpack来处理
//第三方loader 将高级语言转换成地级语法，交给webpack 去处理，
//通过Babel ，可以将高级语法转换成地级语法来处理，
//1.在webpack 中，可以运行如下两套命令，安装两套包去实现Babel 的相关loader 功能，
//第一套，npm i babel-core babel-loader babel-plugin-transform-runtime
-D 起到转换工具的作用
//第二套，npm i babel-preset-env babel-preset-stage-0 -D 起到语法解析的作用
//2. 在webpack,config.js 配置文件中，在module 节点下的rules 数组中，添加一个新的匹配规则，
//2.1 {test :/.js$/,use :'babel-loader',exclude:/node_modules/ } //exclude排除,意思就是/node_modules 中的不处理
//2.2.1· 如果不排除node_modules 中的相关文件，会把里面所有的文件都打包编译，会非常慢
//2.2.2 就算转换了，也无法正常运行，
//3. 在项目根目录下面建立一个.babelrc 的配置文件，是json 格式，因此.babelrc 中必须符合json 语法规则。不能写注释，字符串
//必须是双引号包裹，
//3.1 在.babelrc 写如下配置：
/*
{
"presets" :["env","stage-0"],
"plugins" :["transform-runtime"]
}
*/
npm install --save babel-loader babel-core babel-preset-env webpack
npm i --save babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D
4. render函数
<body>
<div id="app">
<!--Vue 实例控制的元素，-->
最低0.47元/天 解锁文章
扫一扫
2256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
