一. 安装node.js
打开node.js的官网下载://www.greatytc.com/p/b35a67949f78
按照提示安装即可,然后安装淘宝镜像,这样下载速度会快一点
npm install -g cnpm --registry=https://registry.npm.taobao.org
二. 安装vue
进入工作目录,执行
cnpm install vue -g
然后安装vue-cli脚手架
cnpm install vue-cli -g
如此准备工作就完成了。
三. 创建新项目
目前博主准备搭建一个伪音乐搜索网站,执行:
vue init webpack MusicWeb
回车之后需要填写一些配置信息,可根据自己需要填写
等待执行结束,根据提示启动:
访问本地的8080端口:http://localhost:8080/#/
出现如图界面便启动成功了
四. 输出HelloWorld
按照传统,使用之前我们先尝试输出HelloWorld语句
如图,创建vue项目自动生成了各种文件:
- build:最终发布代码的位置,初学不用改动。
- config:配置文件,如端口号,初学不用改动。
- node_modules:node.js执行npm install后安装的各种第三方库,一般也不需要改动。
- static:静态资源文件夹,存放图片等。
- 其他:博主我也是初学,不清楚是啥,不要乱改动就行。
最后就是我们的开发目录----src
src目录下有:
- assets:放置一些图片,如图的logo.png就是vue第一次启动的绿色logo
- components:存放了组件,可以不用,但为了降低代码的耦合度和功能的独立性,最好把某些单独的功能封装在模板中。
- router:里面有一个index.js文件,是项目路由。
- App.vue:主文件,项目入口,可以把组件写到里面而不用components目录。
- main.js:项目核心文件。
了解各种文件的作用之后我们开始尝试输出HelloWorld语句。
先打开 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>
上面是App.vue中的源码,仔细观察发现,其实vue框架的结构遵循如下的模板:
<template>
HTML代码
</template>
<script>
export default {
js代码
}
</script>
<style>
css样式
</style>
可以看到template模板中写了一个div标签,下面有img标签和一个<router-view/>,img标签显示的login,那么<router-view/>显然就是显示其他的文字了,接下来打开route/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
}
]
})
上面是index.js的源码,里面没有HTML代码,而是引用一个“HelloWorld”模板,接下来打开components/HelloWorld.vue,里面代码比较长,但都是我们比较熟悉的HTML代码,看来Vue的启动画面就编写在这里了
<template>
<div class="hello">
<h1>{{ msg }}</h1>
略......
<div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
略......
</style>
我们改动msg的信息:
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'HelloWorld'
}
}
}
</script>
Ctrl + s 保存,然后刷新网页,成功输出“HelloWorld”