玩了一年多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 , 即可看到这个界面:
关键代码解释
作为新手你先记住, 这个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立即发生变化, 如图:
因为你移除了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代码,显示下面的结果:
打开代码, 我们可以看到:
<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, 如图:
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 (注意带#号) , 就会看到我家可爱小肥的照片了:
总结
可以看出除了一大堆工程文件外, 其实vue新手入门相当简单:
- 新建你自己的vue类, 写好模板, css和js
- 修改 router/index.js , 配置好路由.
第一篇就这样结束了. 别忘了源码在此: https://github.com/yunshichen/fei_demo 觉得好就给个star吧.
