Vue学习入门

来源：https://blog.csdn.net/hanhailong18/article/details/81509952

 

　　一，环境搭建
今天主要说一下如何搭建环境，以及如何运行。

　　1,npm安装

brew install npm

如果brew没有安装的话，大家可以brew如何安装哦，这里就不再详细说明了。

　　2,安装vue-cli
vue-cli是用node编写的命令行工具，因此需要进行全局安装。

npm install -g vue-cli

注：node的版本为4.x,及5.x及以上
安装完成后，查看版本

vue -V

　　二，创建并运行项目
环境安装后，我们可以使用vue-cli命令快速创建一个webpack构建的项目

vue init web pack helloworld

我在当前目录创建了一个helloworld的项目。然后我执行

cd helloworld

//跳转到该目录

执行下面的命令来安装依赖

npm install

 

我们会看到当前目录生成了很多的文件，其中我们主要是在src这个文件夹下进行相关的操作的。执行如下命令，启动项目

npm run dev

 

打开浏览器，输入http://localhost:8080可以看到系统默认生成的页面了。

　　三，Vue.js 权威指南的第一个demo
一切准备就绪，接下来我们开始练习《Vue.js权威指南》这本书中的demo，在网上找了许久，也没有找到书中的源码，很是遗憾啊。第一个demo的代码保存为jk.vue
我这边将第一个demo的代码如下：

 

<template>
    <div id = "didi-navigator">
        <ul>
            <li v-for="tab in tabs" v-bind:key="tab">
　　　　　　　　　　{{tab.text}}

            </li>
        </ul>
    </div>
</template>
<script>
export default {
name:'HelloWorld',
data(){
    return {
   tabs:[
        {text: '巴士'},
        {text: '快车'},
        {text: '专车'},
        {text:'顺风车'},
        {text:'出租车'},
        {text:'代驾'}
        ]
  }
}
}
</script>

 

 

App.vue中代码如下：

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

<script>
import HelloWorld from './components/jk'

export default {
  name: 'App',
  components: { HelloWorld }
}
</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>