Eagle

vue 初探（一）——— 安装篇

2019-01-17

一直在使用 react ，但是对 vue 一直有一定的兴趣，所以记录一下自己学习 vue 的一些过程。

安装

对 Vue 还不是很理解，所以先安装一下吧：

1
2
# 最新稳定版
$ npm install vue

然后我看到官网上提供了 vue 的一个脚手架 vue-cli
安装 vue-cli

1
2
3
4
5
6
$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

// 安装完成之后可以通过一下指令查看是否安装成功
$ vue --version

创建一个新项目

我的思路是先对 vue 有一个大概的了解之后再去看详细的细节，所以我选择先使用 vue-cli 脚手架搭建一个小项目，便于自己了解 vue。

1
$ vue create api-vue

中间会有很多安装项目，我就先全部使用默认的添加项了。但是这块应该在 windows 和 mac 上会有所差别，可能在 windows 上有问题，具体提示查看 vue-cli 创建项目

比较让我惊喜的是 vue-cli 提供了一个图形界面用于管理项目(虽然目前不知道这个东西怎么用):

1
$ vue ui

查看 package.json 文件发现有对应的指令：

1
$ yarn serve  // 启动项目

然后打开 http://129.0.0.1:8080 就可以看到初始化的项目了。

添加路由

安装官方提供的 vue-router, 具体怎么使用可以查看 vue-router 官方文档


我就简单记录一下我在使用过程中遇到的问题和解决步骤,

1
$ npm install vue-router

简单说一下 vue-router 的功能：（官网上粘出来的）

  1. 嵌套的路由/视图表
  2. 模块化的、基于组件的路由配置
  3. 路由参数、查询、通配符
  4. 基于 Vue.js 过渡系统的视图过渡效果
  5. 细粒度的导航控制
  6. 带有自动激活的 CSS class 的链接
  7. HTML5 历史模式或 hash 模式，在 IE9 中自动降级
  8. 自定义的滚动条行为

我按照官网上配置出来之后的结果就是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// index.html
<!DOCTYPE html>
<html lang="en">
  <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>api-vue</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but api-vue 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>


// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

问题：

1. 运行结果会报错：

1
You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

问题产生原因：

通过 import Vue from 'vue' 导入的是 vue.common.js, 而 vue-router 内部导入使用的是 vue.js，在 node_modules/vue/package.json 中的 main 字段是："main": "dist/vue.runtime.common.js",，瞬间恍然大悟，他默认导出的是 "dist/vue.runtime.common.js" 不是 vue.js。

解决方案：

我把项目中的 import Vue from 'vue' 改为：import Vue from 'vue/dist/vue', 特别开心的是不报错了，但是就是没有出来内容，页面是空白一片。

2. 页面空白

我纠结了半天想着，这样路由是定义好了，但是具体每个页面对应的每个模块要渲染的位置我并没有指定，所以我觉的页面空白一片是正常现象，所以我就看是看 router-view 的用法，查看了 vue-router GitHub 的 base 例子，


解决方案：

于是我给我的代码添加了 Vue.use(VueRouter); 和 new Vue({..., template: ...}) 具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import Vue from "vue/dist/vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

const Home = { template: "<div>我是 Home 页</div>" };
const Foo = { template: "<div>我是 foo 页</div>" };
const Bar = { template: "<div>我是 bar 页</div>" };

const routes = [
  { path: "/", component: Home },
  { path: "/foo", component: Foo },
  { path: "/bar", component: Bar }
];

const router = new VueRouter({
  routes
});

new Vue({
  router,
  template: `
  <div id="app">
    <h1>Hello Vue-router </h1>
    <ul>
      <li><router-link to="/">/</router-link></li>
      <li><router-link to="/foo">/foo</router-link></li>
      <li><router-link to="/bar">/bar</router-link></li>
    </ul>
    router-view content:
    <router-view class="view"></router-view>
  </div>
`
}).$mount("#app");

再次运行，开心，页面终于出来了，而且路由页正常的运行。。。。😁 😁 😁 😁 😁 😁

以上遇到的问中有提到 vue.common.js 和 vue.js，他俩之间的区别是：
Vue 最后会打包三个文件：runtime only 文件 vue.common.js（运行时），一个是 compiler only 的文件 compiler.js（编译器），一个是 runtime + compiler 的 vue.js（完整版），他们就是官网术语所说的运行时、编译器和完整版
我们如果要用到 template 就要用到 compiler.js，所以我们引入 vue.js 是最好的。

Tags: js vue
← Array 遍历的方法总结 Vue 初探（二）——— 生命周期篇 →