Vue客户端

1. 什么是webpack

本质上，webpack 是一个现代 JavaScript 应用程序的_静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个_依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

图片.png

2. 安装webpack

PS C:\Users\Administrator> npm i webpack@3.12.0 -g

DIY脚手架

1. cmd规范

1. 抛出：module.exports = xxx
2. 引用：require(相对路径)

2. ES6 module

var person;
person = {
    name: "Tom",
    age: 20,
    action: function () {
        console.log("吃饭")
    }
};
var text = "测试webpack";

// 抛出变量
export {text};
// 抛出对象
export default person;

图片.png

// 引入
// as x 起变量名，避免冲突
import * as c from './module'

console.log(c.text)

<body>
  <div id="app"></div>
  <script src="./main.js"></script>
</body>
</html>

Uncaught SyntaxError: Cannot use import statement outside a module
使用webpack支持模块化

E:\giteePython\FrontEndStudy\Vue\Day-04\webpack模块化支持>webpack ./main.js ./bundle.js
Hash: 245a451e490b2734bb12
Version: webpack 3.12.0
Time: 35ms
Asset     Size  Chunks             Chunk Names
bundle.js  3.29 kB       0  [emitted]  main
[0] ./main.js 102 bytes {0} [built]
[1] ./module.js 231 bytes {0} [built]

E:\giteePython\FrontEndStudy\Vue\Day-04\webpack模块化支持>

<body>
  <div id="app"></div>
  <!--<script src="./main.js"></script>-->
  <script src="./bundle.js"></script>
</body>

图片.png

vue-cli3脚手架的使用

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项
目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目 。

安装

关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

npm install -g @vue/cli
# OR
yarn global add @vue/cli


C:\Users\Administrator>npm install -g @vue/cli
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
[######............] \ idealTree:tar-stream: timing idealTree:node_modules/@vue/cli/node_modules/tar-stream Completed i

拉取 2.x 模板 (旧版本)

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

使用vue-cli 2.x 创建项目

使用webpack-simple创建项目

1. 命令 vue init webpack-simple my_project

2. 文件结构：

使用webpack创建项目

1. 命令： vue init webpack 项目名
2. 文件结构
3. 
   图片.png

启动

npm run dev

### 安装vue-router

npm install vue-router -S  // 局部安装vue-router
// 安装报错的话指定版本安装
npm install vue-router@2.0.0 -S 

在引入文件时，index.js可以省略不写

webpack

1. entry

项目的入口文件, (main.js或者index.js)

2. output

输出出口

3. loading

babel-loader: 对es6代码的解析
css-loader：css代码解析
style-loader：将css代码添加一个style标签插入到header中