搭建vue项目环境以及创建一个简单的vue的demo

一、vue-cli脚手架的搭建步骤

1.首先，确定你的电脑上已经安装了nodejs，可以使用npm包管理器安装环境，如果还没有安装node环境，则需要安装node.js 这个很简单    默认点击安装完成即可  这里不不做演示了

2.创建一个项目存放的文件夹目录，然后进入到该目录下    按Shift+鼠标右键点击在此打开PowerShell窗口，此时可使用node -v检查node的版本，如果出现版本号则node已安装，如下图：

3.使用以下命令全局安装vue-cli  首先输入命令：npm install -g vue-cli（或者使用国内的淘宝镜像  命令为npm install -g cnpm --registry=https://registry.npm.taobao.org）   如下图：

4.使用命令 vue init webpack vue-demo 搭建vue项目, “vue-demo” 是你的项目名称  如下：

5. 以上步骤完成之后，项目目录结构如下图所示，其中的src目录下的文件，就是我们自己需要使用到的文件了  如下图：

6.为了方便，我用java后端开发工具idea打开刚才创建的vue-demo项目（前端一般用的IDE为webstorm和vscode,建议还是用前端专业的IDE）  然后执行 npm run dev 命令，启动项目 如下图：

7.当出现下图时，说明项目启动成功！ 如下图：

 

8.这时我们可以通过浏览器访问链接 http://localhost:8080 来访问项目了。这时页面如下图：

二、 创建一个简单的vue例子

1.这里，我们在已经搭建好的vue项目中，实现一个从项目已有的Hello World! 跳转至我们自己创建的Hello Vue组件页面的例子，首先，在已经搭建好的环境的components下新建一个vue文件，作为我们自己的vue组件  如下图：

2.然后在HelloVue.vue文件中添加以下代码，vue文件的格式分为三个模块，如下图所示，首先时template模板，然后是script标签及代码，最后是style样式    代码如下：

<template>
  <div id="vue">Hello Vue.js! {{ message }}</div>
</template>

<script type="text/javascript">
  export default { //这里需要将模块引出，可在其他地方使用
    name: "HelloVue",
    data (){ //注意：data即使不需要传数据，也必须return,否则会报错
      return {
        message: "Hello vue"
      }
    }
  }
</script>

<style type="text/css">
  #vue{
    color: green;
    font-size: 28px;
  }
</style>

3.在项目搭建时生成的HelloWorld.vue文件中的template中添加一个链接，用于跳转至我们自己的组件内容。 
关于 router-link 的使用，请参考 vue-router文档  代码如下：

<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>
    <h1>
      <router-link to="/HelloVue">跳转至HelloVue</router-link>
    </h1>
  </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>

4.接着，我们修改项目中的router目录下的index.js文件，这是一个vue-router的简单应用。对于路由，我们一般会想到宽带安装时我们使用的路由器，这里的路由主要是为了定义页面之前的跳转。在router下的index.js文件中添加以下代码：

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

Vue.use(Router)

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

5.最后，我们刷新浏览器就可以看到效果了   如下图：

 

 

6.以上就实现了一个简单的页面跳转了     第一次开始学习vue   欢迎大家相互学习交流！