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 [email protected] -D
但是需要本地安装webpack
第六步。建立一个配置文件，webpack.config.js
第七步，项目本地安装wepack. npm i [email protected] -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 [email protected] -D npm i [email protected] -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 实例控制的元素，-->
<h1>123</h1>
</div>
<script>
//第一步
var login ={
template : '<h1>这个是一个组件，通过render实现</h1>'
}
var vm = new Vue({
el : '#app',
data :{
},
methods:{
},
//第二步，
render :function(createElements){ //createElements 是一个方法，调用他进行渲染,渲染为html结构，
return createElements(login);
//retrun 的结果会替换页面中指定的容器 ，比如app，并且把其内部的内容也替换掉,好像v-text功能
}
})
5. vue 结合Webpack使用，
1.从前面复制一个完整的VUE含有很多包的项目过来
2.安装vue npm i [email protected] -S //安装为项目依赖 npm i [email protected] -S
3.login.vue 的解析和使用
安装 npm i vue-loader vue-template-compiler -D
"vue-loader": "^10.2.4",
"vue-template-compiler": "^2.5.16",
[
]
//在配置文件中新增配置项。
{test : /\.vue$/, use : ‘vue-loader’}
错误总结：
1.问题。ERROR in ./src/login.vue
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
@ ./src/main.js 22:0-31
@ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/main.js
2. 分析. Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的,
3.降低版本 [email protected]
总结： 梳理哦
webpack中如何使用vue
第一步，安装vue 的包，npm i vue -S
第二步，由于在webpack中，推荐使用 .vue 这种模板组件定义组件，因此需要安装能解析编译这种文件的loader ，npm i vue-loader vue-template-compiler -D 注意版本
第三步，在main.js 中倒入vue模块，import Vue from ‘vue’
第四步，定义一个.vue结尾的组件， 组件主要包含三个部分,template script style
第五步，导入该组件 import login from ‘’
第六步，创建vm 实例，var vm = new Vue({
el : ‘app’,
render : c => c(login),
})
第七步，在页面中创建id=app 的元素，然后作为vm 的控制区域，
6. Vue 文件中定义数据和使用方法，--
使用 ES 6 规范或者node规范，成套使用。
1.//Es 6 中也通过规范，定义了导入、导出模块
//倒入 import XXX from '' import 模块名称 from '标识符'
//在ES 6 中，使用 export default 和export 向外暴露成员，
//在node 中，使用 var 名称 = requires('模块标识符'); 导入
// 使用mudule.exports = {} exports 向外暴露。
暴露：
使用export default { //对象。
}
//第一，暴露形式
//Es 6 中也通过规范，定义了导入、导出模块
//倒入 import XXX from '' import 模块名称 from '标识符'
//在ES 6 中，使用 export default 和export 向外暴露成员，
//在node 中，使用 var 名称 = requires('模块标识符'); 导入
// 使用mudule.exports = {} exports 向外暴露。
//第二。暴露形式
//node 中向外暴露成员的形式，
// export default{
// name : 'zhangsan',
// age : 20 ,
// sex :'男'
// }
//第二种形式，
var info ={
name : 'zhangsan',
age : 20 ,
sex :'男'
}
export default info
// export default {
// address :'北京'
// }
//在一个模块中，export default 只能向外暴露一次，
//第三，暴露的不同方法，
export var title ='小星星'
//在一个模块中，可以同时使用export default 和 export
//使用export 这种形式，只能使用{} 来使用，叫做 【按需导出】
//export default 智能暴露一个，export 可以暴露多个，
//然后根据import 按需倒入导出，
//严格使用 {} 来接收
//使用export 导出的成员，在import 中可以使用as 来其别名，
//第四，就是import 那边的接收形式。
export var sb ='lsj'
export var winer = 'lsj+1'
使用：接收
//接收
import m122 ,{title as title123,sb,winer} from './test.js'
console.log(m122);
console.log(title123);
console.log(sb);
console.log(winer);
7. webpack 在vue 中使用路由router
第一步，安装vue-router .。npm i [email protected] -D
第二步，手动安装 import VueRouter from 'vue-router'
第三步,建立建立 Vue.use(VueRouter);
import Vue from 'vue'
// ，第一步装包，
import VueRouter from 'vue-router' //第二步，引入相关Vue包文件
Vue.use(VueRouter) //第三步，建立Vue与vueRouter 之间的关系，手动的安装，如果是引入script 则不需要，
//重要的一部没有来
import app from './App.vue'
//第四步，引入相关的组件
import Account from './main/Account.vue'
import Goodlists from './main/GoodList.vue'
//第五步，创建路由对象
var routerObj = new VueRouter({
routes :[
// accounts goodlists
{path :'/account' ,component: Account},
{path :'/goodlist',component : Goodlists}
]
});
//第六步，挂载到App.vue 中，不然放哪呢？
var vm = new Vue({
el :'#app',
render : c =>c(app), //render把所有东西都占据和清空了，所以没有显示，
//所以不要把router-link 和router-view 的内容放在这里，
router : routerObj //第四步，挂载到vm 上
});
[
/*
webpack 中如何使用Vue ，
1.安装包 ，npm i vue -S
2.由于在webpack 中，需要安装能解析这种文件的loader，npm i vue-loader vue-template-compiler -D
3. 在main.js 中倒入模块，import Vue from 'vue'
4. 定义一个以.vue 结尾的组件
5. 引入该组件 import VueRouter from 'App.vue'
6..创建 vm 实例， var vm= new Vue({
el : '#app'
render : c=> c(app)
})
7.在页面中创建id= app 的元素，作为控制区域，
*/
]
8. 创建子路由，路由嵌套，
var routerObj = new VueRouter({
routes :[
// accounts goodlists
{path :'/account' ,
component: Account,
children :[
{path : 'login',component : login},
{path : 'register',component : register}
]
},
{path :'/goodlist',
component : Goodlists,
}
]
});
9. scoped lang 属性，为style指定自己内部私有的css 样式，
lang= “scss” scoped
10.
11.
12.