Vue.js快速入门-优快云博客

本文链接：https://blog.youkuaiyun.com/Cherry_King/article/details/102808543

Vue.js教程

0.vue介绍
1.vue安装
2.vue目录结构
3.Demo
4.模板语法

0.vue介绍

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试

1.vue安装

安装node.js，安装完node.js之后，npm也会自动安装：

1.下载Nodejs
2.安装Nodejs：直接双击安装即可。
查询是否成功安装的命令：

	node -v
	npm -v

升级或安装cnpm

	2.3.0
	#升级 npm
	cnpm install npm -g
	# 升级或安装 cnpm
	npm install cnpm -g

全局安装脚手架工具vue-cli，命令如下：

C:\Users\gcr-personal>npm install --global vue-cli
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of
 @vue/cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coff
eescript" (no hyphen)
C:\Users\gcr-personal\AppData\Roaming\npm\vue -> C:\Users\gcr-personal\AppData\R
oaming\npm\node_modules\vue-cli\bin\vue
C:\Users\gcr-personal\AppData\Roaming\npm\vue-init -> C:\Users\gcr-personal\AppD
ata\Roaming\npm\node_modules\vue-cli\bin\vue-init
C:\Users\gcr-personal\AppData\Roaming\npm\vue-list -> C:\Users\gcr-personal\AppD
ata\Roaming\npm\node_modules\vue-cli\bin\vue-list
+ vue-cli@2.9.6
added 241 packages from 206 contributors in 781.345s

vue项目初始化命令如下，若没有安装webpack，则先安装webpack：

	npm install -g webpack

然后：

	vue init webpack myVue
	#一路yes就行

安装好之后

	$ cd myVue
	$ npm install
	$ npm run dev

然后再浏览器访问：localhost:8080，访问结果如下：
在这里插入图片描述
另外：vue安装参考链接：参考vue安装教程

2.vue目录结构

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：(1)assets: 放置一些图片，如logo等。(2)components: 目录里面放了一个组件文件，可以不用。(3)App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。(4)main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

3.Demo

现在Vue.js安装好了，项目也搭建起来了，接下来通过阅读项目的源码来分析一下Vue的开发方式。
根据我的理解，Vue的目的是组件式开发，将一个个功能模块开发成一个个组件，然后将组件拼起来组成一个完整的web页面。这样做有一个好处，就是我们的点击动作时，不必将整个页面进行刷新，只需要替换其中的某些组件，就可以实现所谓的“页面切换”。
举个例子：我们开发一个网页，底部的页脚（会放些版权信息和联系方式什么的）在每个页面中是一样的，我们就可以把页脚做成一个组件，页面进行切换的时候，只切换中间的内容组件即可。
下面开始分析Demo的代码：

首先分析index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>myvue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

index.html，是项目的入口文件，和正常的html一样，有head、title等标签，不同的是，这里嵌入了

<div id="app"></div>

即嵌入了，App.vue。

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>logo</h1>
    <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/first">Go to First</router-link>
    <router-link to="/second">Go to Second</router-link>
  </p>
    <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>

在src\components下新建First.vue,Second.vue，原来项目中自带一个HelloWorld.vue。
First.vue:

<template>
  <div class="first">
    <h1>{{ msg }}</h1>
    <h2>-----------</h2>
  </div>
</template>

<script>
export default {
  name: 'First',
  data () {
    return {
      msg: 'Welcome to First Page!'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
  color: #42b983;
}
</style>

Second.vue:

<template>
  <div class="second">
    <h1>{{ msg }}</h1>
    <h2>**********</h2>
  </div>
</template>

<script>
export default {
  name: 'Second',
  data () {
    return {
      msg: 'Welcome to Second Page!'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
  color: #42b983;
}
</style>

HelloWorld.vue:

<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>

然后在router/index.js注册路由信息。
index.js如下:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/First'
import Second from '@/components/Second'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',//将HelloWorld注册为根路径
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/first',//将First.vue注册为/first路径
      name: 'First',
      component: First
    },
    {
      path: '/second',//将Second.vue注册为/second路径
      name: 'Second',
      component: Second
    }
  ]
})

然后，npm run dev后就可以访问网站了。

访问http://localhost:8080/#/
访问http://localhost:8080/#/first
点击Go to Second，切换到second.vue
而图片和logo都不变。

4.模板语法

数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue测试</title>
		<script src="js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{message}}</p>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					message:'Hello Vue.js!'
				}
			})
		</script>
	</body>
</html>