Vue—九天磨一剑之es6模块规范,webpack,vue-cli脚手架的使用

es6模块化

• es6与node

  • es6定义了模块化功能,导入模块和导出模块,import export (seajs，requirejs)
  • 在node中不能直接使用,不支持es模块,node支持commonjs

• 前端模块化的使用
  1 定义一个模块 一个js文件就是一个模块仍然适用
  2 导出一个模块 export
  3 使用一个模块 import

• 引入模块依赖

<script src="https://google.github.io/traceur-compiler/bin/traceur.js
">script>  //当浏览器版本较低时,不支持es6语法,引入包来解析
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js
">script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js
">script>
<script src="main.js" type="module">script>//表示当前引入的是一个模块

• 导入导出模块
  import一般放在文件的最上面
  (1) 方式一:

模块一中:
export let str ='123';//导出的时候必须要名字,通过export导出一个变量 会在内部声明一个对象 把变量名和值作为key和value放到这个对象中导出
模块二:
import {str} from './A.js'   //导入时解构赋值
或者
import * as 任意名字 from './A.js'//此时接收的是模块一的对象

问题:

引入外部解析包的原因,将外部解析包依赖去掉以后,就正常了

(2)方式二:

模块一:
export default str
模块二:
import 任意名字 from 地址

webpack

webpack包含了打包,加载模块来实现编译 这两大功能
babel手动编译麻烦,现在流行的自动编译工具有webpack gulp grunt,使用vue都用webpack.

定义:强大的模块加载器和打包工具(将很多文件打包成一个,在开发阶段使用,打包好了,上线不需要)
- Webpack把所有东西都看成是模块，这是Webpack设计原则之一。不管什么资源，都变成了可配置的，都通过loader，plugins配置
- 一般src文件夹下存放源代码,dist文件加下存放要上线的代码

• 使用
  
  1. 安装:如果安装全局,可能会导致版本的差异,故现在都将其安装到项目开发依赖中,可以使每个人的版本统一.

npm i webpack --save-dev

1. 在package.json中配置脚本,在scripts字段里面加上一个build字段对应webpack.cmd,在当前文件夹的命令行下运行npm run build,会执行到webpack,再在webpack.cmd中找到webpack.js,但是这个时候的环境就已经变成了该目录了.
   

1. 在当前目录下创建webpack.config.js文件,webpack默认是commonjs规范,可以直接在要打包的js中使用commonjs和es6规范,但是默认是不支持es6转化的,只能打包,es6转es5要用到babel编译工具

babel

• babel-core 是babel的核心,使用babel必须安装
• babel-loader 翻译官,用来翻译语法,但是它本来不懂
• babel-preset-es2015 翻译官学会了es6语言,能转化成es5了

解析es7语法

• es2015 stage-3 stage-2 stage-1 stage-0 stage不断精简才实现es6

解析css

先将css看成一个模块(webpack打包),使用css-loader翻译官来解析,cssloader翻译官会将css变成js,这样的话,我们也会在dist文件夹中接收到bundle.js,但是这个时候css并不能作为标签使用
使用:
(1) 在main.js将css文件引入,因为我们的入口是main,这样也会解析css
(2)webpack.config.js配置,通过style-loader来将打包成js的css转化成style标签放在bundle.js中使用

{
     test: /\.css$/, use: ['style-loader', 'css-loader']} 

解析less

需要less 和less-loader

解析图片

如果直接使用js引入图片,默认不会进行打包文件,直接路径就是字符串,这样在输出的js中路径如果使用的相对路径就不对了,使用绝对路径的话,换个电脑也不对了.

• base64码
  小图片base64 小于8k转base64 设置大小 超过的时候将文件直接输出 一般以8k为准

• 方案一:背景图片
  webpack会去打包,但是仍然需要一个loader file-loader url-loader

• 方案二:main.js中引入图片的方法

import img from './1.jpg'
let oImg = document.createElement('img');
oImg.src = img;
document.body.appendChild(oImg);

index.html

打包html

以src下的html作为模板,打包后的html会默认将打包后的js文件引入

 plugins:[
        new HtmlWebpackPlugin({
            filename:'index.html', //默认打包出的文件index.html
            template:'./src/index.html',
        })
    ]

npm run build

• 会输出实体文件dist文件夹,速度会很慢,一般上线的时候使用

npm run dev

• 一般我们本地跑一个服务器,当文件变化,刷新浏览器

基础webpack用法

使用的包:

npm i webpack babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 css-loader less less-loader sass-loader file-loader url-loader html-webpack-plugin webpack-dev-server --save-dev

vue-cli

vue-cli 脚手架(将基础的东西搭建好,给你自动生成模板工程)
vue-router是 vue路由插件 支持你单页应用的
vue-loader是webpack下loader插件 可以把.vue文件 输出成组件,.vue文件基于webpack构建的

• 安装 命令行工具 安装后命令行中会多vue命令.

vue --help
vue --list
vue init webpack(模板名) webpack-pro(项目名)
cd 项目
npm install
npm run dev

• 更改端口号

  项目工程文件夹-> config ->index.js->更改端口号
  

• vue.esm.js
  支持es6的vue.js

• runtime+compiler
  如果选择的是runtime,不支持template

• style标签scoped属性
  Chromium 最近实现了一个HTML5的新特性：范围样式，又叫做