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>

//第一步

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 vue@2.5.2 -S //安装为项目依赖 npm i vue@2.5.2 -S

3.login.vue 的解析和使用

安装 npm i vue-loader vue-template-compiler -D

"vue-loader": "^10.2.4",

"vue-template-compiler": "^2.5.16",

[

vue-template-compiler@2.5.16

+ vue-loader@10.2.4

]

//在配置文件中新增配置项。

{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.降低版本 vue-loader@10.2.4

总结：梳理哦

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 vue-router@2.4.0 -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.

Vue 学习第六天学习笔记相关推荐

Vue -- 指令【学习笔记】（持续更新）
Vue – 指令[学习笔记](持续更新) 记录了Vue第三天的学习笔记 v-show 注意,v-show 不支持 <template> 元素,也不支持 v-else. 带有 v-show ...
Vue + Spring Boot 学习笔记02：引入数据库实现用户登录功能
Vue + Spring Boot 学习笔记02:引入数据库实现用户登录功能在学习笔记01里,我们利用跨域打通了前端的Vue与后端的Spring Boot,实现了用户登录功能,但是后台的登录控制器在 ...
Vue + Spring Boot 学习笔记01：实现用户登录功能
Vue + Spring Boot 学习笔记01:实现用户登录功能一.创建后端Spring Boot项目Book Management 二.创建前端Vue项目bm-vue 三.修改后端项目Book ...
唐金州的Vue开发实战学习笔记（基础篇）
Vue开发实战学习笔记简易的Vue程序组件事件插槽单文件组件双向绑定虚拟DOM与key属性组件更新状态data与属性props vue的响应式更新计算属性和侦听器计算属性 com ...
Vue数据代理+事件处理+事件修饰符的作用+计算属性的使用，尚硅谷Vue系列教程学习笔记（2）
尚硅谷Vue系列教程学习笔记(2) 参考课程:<尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通> 参考链接:https://www.bilibili.com/video/ ...
唐金州的Vue开发实战学习笔记（生态篇）
Vue开发实战学习笔记 Vuex Why Vuex How Vuex Vuex的核心概念和底层原理 Vuex的最佳实践 Vue Router Why Vue Router 路由类型及底层原理 Nuxt ...
技术胖前端学习路线学习笔记【更新中】
文章目录技术胖前端学习路线学习笔记 1. 网络知识 2. 超文本标记语言(HTML) 3.层叠样式表(CSS) 4.浏览器脚本语言(JavaScript) 5.版本控制管理系统Version Con ...
vs2010 学习Silverlight学习笔记(7)：控件样式与模板
概要: 终于知道Silverlight--App.xaml是干什么用的了,不仅可以用来封装样式(类似css),还可以制定控件模版...好强大的功能啊. 封装: 继续学习<一步一步学Silverl ...
Deep Learning（深度学习）学习笔记整理系列之（五）
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

Vue 学习第六天学习笔记

Vue 学习第六天学习笔记相关推荐

最新文章

热门文章

Vue 学习 第六天学习笔记

Vue 学习 第六天学习笔记相关推荐

最新文章

热门文章

Vue 学习第六天学习笔记

Vue 学习第六天学习笔记相关推荐