一. 安装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

回车之后需要填写一些配置信息，可根据自己需要填写

创建项目

启动

进入本地服务器

四. 输出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>

”