vuecli_0">1. 创建第一个vue-cli项目

依次执行如下命令：

npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
最后访问：http://localhost:8080/ 可以看到运行结果。

2. 项目目录

3. Hello Word

创建HelloWord.vue组件

<template>
  <div>
    <p class="msg">{{msg}} </p>
  </div>
</template>

<script>
  export default { //配置对象（与vue一致）
    data () { //在组件中，data必须写成函数形式
      return {
        msg: 'Hello Word Vue Components!'
      }
    }
  }
</script>

<style>
  .msg {
    font-size: 30px;
    color: red;
  }
</style>

(1). 组件是什么？组件是一个局部的功能界面，包含了要实现这个功能界面所需的所有资源，即：html/css/js。
(2). 此处注意，data必须写成函数的形式，且必须有return。即data(){}。

创建App.vue(根组件)

<template>
  <div>
    <img class="img" src="./assets/logo.png"/>
    <br/>
    <!-- 3. 使用组件标签 -->
    <HelloWord/>
  </div>
</template>

<script>
  // 1.引入组件
  import HelloWord from './components/HelloWord.vue'

  export default {
    // 2.将组件映射成为标签
    components: {HelloWord}
  }
</script>

<style>
  .img {
    width: 200px;
    height: 200px;
  }
</style>

注意引入并使用组件的方式：
(1). 在<script>下通过import引入组件；
(2). 通过components将组件映射成为标签；
(3). 使用组件标签。

创建入口js(main.js)

/* vue的入口js文件 */
import Vue from 'vue' // 引入组件，简单的理解，一个vue文件就是一个vue的组件
import App from './App'

new Vue({
  el: '#app',
  /* 通过components:{ App }相当于components:{ App: App }配置，将组件映射成标签 */
  components: {App},
 /* 将该标签插入渲染到el所匹配的页面的块中 */
  template: '<App/>'
})

此处先使用components，将组件映射成为标签，然后使用template将该标签插入渲染到el所匹配的页面的块中。

主页面文件index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue_demo</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

运行结果
注意：运行时可能会报eslint检查错误，但是不会影响正常运行。错误如下：

如下三种解决方式：
(1). build文件夹下–>webpack.base.conf.js—>找到config.dev.useEslint，然后ctrl+鼠标左键点入，将useEslint: true改为useEslint: false。然后重新执行npm run dev;
(2). 在.eslintrc.js文件下配置忽略规则：

配置完成后，切记重新执行npm run dev。
(3). 直接在.eslintignore加入所有的js和vue文件，即加入：*.js *.vue。但通常不建议这样做，重新执行npm run dev。