学习Vue（Part 2，Vue的脚手架）

作者：漫漫鱼发布日期：2018年8月7日推荐：

脚手架

上一篇写了一个最基本的例子，今天看一下怎么样快速建立一个Vue项目。

Vue官方提供了一个 Vue-cli 脚手架，它让你非常容易地构建项目，包含了 Webpack，Browserify，甚至 no build system。好吧，我又看到要学的新东西了Webpack。

安装

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

创建项目

vue create my-project
# OR
vue ui

这里都是依赖node.js的，装完后在cmd模式下输命令即可。

Webpack

什么是 webpack

赶紧到官网看了一下，首页一张图，代码全靠写。

你的代码

src/index.js

import bar from './bar';

bar();

src/bar.js

export default function bar() {
  //
}

打包

这个你可以写一个webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

官网说也可以不写这个配置，反正我现在还迷糊着不写是几个意思。

使用

page.html 页面

<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <script src="dist/bundle.js"></script>
  </body>
</html>

貌似用起来简单，先也就看个大概。

创建项目

通过 vue create my-project创建如下文件夹和文件。

查看了public下单index.html，浏览器是空的，用文本编译器打开这个文件，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>my-project</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

看来还没有编译代码，看了一下 README.md

# my-project

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

执行了几个命令，报错。又看文档，说用 GUI 配置项目，执行 vue ui，跳出一个页面。

点击任务中的 build，瞬间完成，输出了 dist 目录，其中的index.html文件内容，好像我知道了点

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link rel="icon" href="/favicon.ico" />

  <title>my-project</title>
  <link as="style" href="/css/app.eca329cd.css" rel="preload" />
  <link as="script" href="/js/app.0d619dc5.js" rel="preload" />
  <link as="script" href="/js/chunk-vendors.f351c155.js" rel="preload" />
  <link href="/css/app.eca329cd.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <noscript><strong>We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>

  <div id="app"></div><script src="/js/chunk-vendors.f351c155.js" type="text/javascript">
</script><script src="/js/app.0d619dc5.js" type="text/javascript">
</script>
</body>
</html>

刷新页面，ok！

小结

上一篇的入门中，用了传统的模式直接用 Vue ，今天的学习发现，这种开发模式完全变了，js 代码不是直接写的，js 代码也要build，所有的都写到 .vue 文件。不过这里还需要好好看一下整个流程，先写到这里。