vue第1篇:安装, 初始化工程,第一个实用demo

玩了一年多vue, 觉得确实挺好用. 这个系列会写一些实战心得, 你可以在我的githup上下载工程自己跑跑. 教程打算面向代码熟手, 基础知识点请自行查询.

githup的工程在:

git clone https://github.com/yunshichen/fei_demo

基础知识

设置npm

先要设置npm, 不然安装库像蜗牛走路一样慢. 打开命令行并敲入:

npm config set registry https://registry.npm.taobao.org/

这样就ok了

安装vue

npm install vue vue-cli -g

初始化工程

如果你已经下载了我的githup工程, 不需要再初始化工程了. 直接 npm install && npm run dev 即可.

运行这个命令:

vue init webpack fei_demo

将会在当前文件夹生成一个目录 fei_demo , 然后可以用你喜欢的编辑器打开里面的文件. 我是用 visual studio code .

直接运行

cd fei_demo/demo1
npm install && npm run dev

会看到命令行有提示. 敲入 localhost:8080 , 即可看到这个界面:


image.png

关键代码解释

作为新手你先记住, 这个vue程序会先加载main.js. 这个文件的主要作用是作为入口, 引入App.vue这个文件, 真正的模板代码由App.vue开始. main.js 另一个主要作用是引入第三方包(特别是原生的css和js), 以后我会写.

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

你可以看到在初始化vue(new vue) 之后有几个参数, 它们的意思分别是:

  • el: 表示对应的模板id. (这个属性在初学的时候并不重要. 如果你是用 vue init 来初始化工程, 不需要改动)
  • router: 表示使用vue 路由. 路由的意思, 就是用不同的字符串路径对应不同的组件, 概念理解复杂, 实际应用简单.
  • components: vue 引入其他组件的特定语法, 死记硬背即可.
  • template: 这个文件的内容最终生成到哪个文件(术语称为渲染). 和el属性一样, 初学的时候你不需要修改.

App.vue

App.vue的内容如下:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

用 <template>包住的代码称为模板代码, 你可以理解成加了循环和判断等小语法的html代码. 这其中最重要的是 router-view 组件. 引入router-view组件之后, 你写的代码会分离到一个个文件, 方便维护. 一会我们会说.

修改App.vue

我们动手来找找感觉. 把App.vue里的<img> 标签删掉. 把style里的一大堆内容删掉, 改成这个样子:

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
}
</style>

你可以看到浏览器里vue立即发生变化, 如图:


image.png

因为你移除了style里的样式. 所以居中的vue图片没有了, 文字也不居中了.

router目录下的index.js

内容如下

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

撇开这些不熟悉的语法, 最值得注意的是什么呢? 其实在 App.vue 里的组件 router-view 会搜索这个文件的配置. 比如 / 代表根目录, 它对应着 Helloworld 组件, 所以当用 localhost:8080/访问的时候, 就会自动显示 Helloworld 的内容. (# 是vue 路由的标志. 只要用了路由组件就会带上)

简单来说, 如果你要开发自己的页面, 新增 vue 的文件, 然后在这里配上路径就行了. 其实就这么简单.

HelloWorld.vue

位于 components 目录. 我们再来看看 HelloWorld.vue的内容. 按照网页的访问结果, 我们猜测它应该是一些html代码,显示下面的结果:


image.png

打开代码, 我们可以看到:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

如果我们比对下, 就可以知道这个文件确实就是实际显示的内容.

动手练习

我们来动手试试, 以加深理解. 在src 目录下新建 views 目录. 并在views 目录下新建FeiView.vue, 如图:


image.png

FeiView.vue 的内容

<template>
  <div class="hello">
      <img src='../assets/fei.png'>
      <br/>
      萌萌哒小肥在此
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .hello{
        margin-top: 40px;
        text-align: center;
    }
</style>

很明显这个文件就是想显示一张图片. 所以你要准备一张名为 fei.png 的图片, 放到 assets 目录下.

修改router/index.js

修改这个文件, 增加路由如下:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import FeiView from '../views/FeiView'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
    ,{
      path: '/fei',
      name: 'FeiView',
      component: FeiView
    }
  ]
})

这个文件将 /fei 这个路径和新建的 FeiView文件对应起来. 现在, 你只要打开浏览器, 输入 http://localhost:8080/#/fei (注意带#号) , 就会看到我家可爱小肥的照片了:

image.png

总结

可以看出除了一大堆工程文件外, 其实vue新手入门相当简单:

  • 新建你自己的vue类, 写好模板, css和js
  • 修改 router/index.js , 配置好路由.

第一篇就这样结束了. 别忘了源码在此: https://github.com/yunshichen/fei_demo 觉得好就给个star吧.

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容