• 文章作者:漫漫鱼
  • 发布日期:2018/08/07
  • 推荐:

Vue真正强大的地方是结合Node.js,通过服务器端的编程方式来写前端页面,呵呵,说的过了你可别喷我哦。

安装Vue脚手架

上一篇写了一个最基本的例子,今天看一下怎么样快速建立一个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

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

Image

你的代码

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创建如下文件夹和文件。

Image

查看了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,跳出一个页面。

Image

点击任务中的 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!

Image

小结

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