webpack学习

npm（  npm  i   nrm   -g  下载  nrm  工具）+nrm（对下载镜像地址进行修改）

前端的项目构建工具（基于node.js）

使用  Hbuild  开发工具进行webpack项目的开发

npm常用的命令解析：常用的npm命令（小白入门级别）   npm 跟 cnpm

npm i webpack -g

 

对于项目：

import $ from 'jquery'     //效果相当于   const   $   =    require ( 'jquery' )----这是es6中导入模块的方式

 

由于浏览器不支持es6的语法，所以可以通过webpack将其语法转化为其他版本的语法让浏览器可以进行渲染

注意其中webpack打包命令的变化-----webpack打包命令

 

webpack-dev-server ------------把该工具安装到项目的本地开发依赖：   cnpm   i  webpack-dev-server  -D

由于该工具是对于项目来说进行的安装，所以无法直接在命令行中进行执行，所以要在package.json中的" scripts" 中写入：

"dev":"webpack-dev-server"

然后执行：  npm   run  dev  --------其中一般会报错-----这个时候需要将项目中node_modules文件夹删除然后再使用  cnpm i  进行重新创建

 

最后再使用   npm  run  dev     ------（可能还会出现缺少webpack-cli的问题----这个时候再使用  cnpm  i  webpack-cli -D）---再尝试运行即可

 

webpack将整个项目运行在它特定的服务器中：

 

cnpm i  html-webpack-plugin  -D将页面也放入到内存中去

 

 

webpack处理非js类型的文件，我们需要手动安装 一些合适的第三方  loader加载器：    

    1.cnpm  i  style-loader  css-loader    -D

    2.在webpack。config。js配置文件中新增配置节点

 

默认情况下，webpack 无法处理css文件中的url地址，不管是图片还是字体库，只要是url地址都处理不了

    进行：  cnpm   i   url-loader  file-loader  -D

设置网页元素中的  url 地址属性

 

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

cnpm i  babel-preset-env babel-preset-stage-0 -D

 

在webpack项目中，使用vue进行开发:   import   Vue from  '../node_modules/vue/dist/vue.js'

webpack无法打包  .vue 文件，需要安装相关的  loader    （cnpm  i  vue -loader   vue-template-compiler -D）-----在webpack中如果想要通过vue，把一个组件放到页面中区展示，可以使用new  Vue（）中的  render  函数实现    -------    （render :  x=>x(login)）

 

 

Node中,使用  require(' **') 来导入模块-------  向外暴露成员的方式：  module.exports={}

es6中导入模块，使用import模块名称  ------使用export  default （在外部可以使用任意的名称来接收变量---而且只允许向外暴露一次）和export  （如向外暴露成员  export var  title  = ' hhhhh'-------在外部接收该变量就使用   import  ( title  )   from  './***.js'）向外暴露成员

 

webpack中使用vue路由（cnpm  i  vue-router -D）-----先导入vue的包，然后在导入vue-router------通过vue.use（vuerouter）

 

抽离路由（在项目中单独建立一个router.js 文件 ---将各种父子类型的路由组件配置到里面------最后还要通过   export   default   router  将其暴露出去）

 

 

MintUI是基于VUE的组件库----------而MUI则是一个代码片段，就相当于bootstrap（在webpack中使用的时候，只需要import相关的css文件即可-----mui并不能使用npm下载，需要手动从github中下载解压到项目中）

 

 

通过git对项目进行托管------先配置好 .gitignore  文件 -----然后使用 git  init 创建本地仓库-------git   status   查看状态------git  add .-----将所有文件放到本地仓库（远程仓库为  码云-----需要本地电脑的公钥---也就是在用户目录下面的  .ssh 中的pub文件里面的内容）

 

在实际项目中，加载首页轮播图数据---使用  vue-resource 组件  ------  cnpm  i   vue-resource -S

 

 

es6中的promise学习：

//   读文件操作------------------
function getFileByPath(path,callback)
{
	fs.readFile(path,'utf-8',(err,datastr) =>{
		if(err) callback(err) 
		callback(datastr)
	}) 
}

getFileByPath(path.join(__dirname,'./package.json'),(data)=>{
	console.log(data)
	})

 

 

vue-preview  的使用  vue中的图片预览插件  插件使用地址

 

vuex  的使用-----相当于一个数据的仓库