Vue（利用Vue-cli搭建大型项目）

搭建流程

1. 先安装好git和node.js

2. 打开git下载淘宝镜像

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 全局安装vue-cli 

$ cnpm install vue-cli -g

4. 初始化，创建项目(vue1)，按回车即可

$ vue init webpack vue1

5. 进入创建好的文件夹vue1

$ cd vue1/

6. 安装package.json配置的依赖,只是会多个文件夹node_modules

$ cnpm install

7. 开启本地服务器，会生成一个地址，打开它可以看到一个Vue的默认模板

$ npm run dev

8. 修改.eslintrc.js文件配置，找到rules这个对象，添加几个规则

    'semi':2, //分号不报错
    'no-unnsed-vars':1, //定义未使用不报错

9.如果不用eslintrc在config文件的index.js修改一下配置，找到useEslint，将true改为false即可

   useEslint: false

10.  在src文件下的components文件新建一个模板myComponent.vue 

<template>
    <div class="wrap">
        <div>我是{{name}}</div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            name:'张三'
        }
    }
}
</script>

<style>
    .wrap{
        color:red;
    }
</style>

11. 打开src文件下的App.vue，将默认的模板去掉，引入自己的模板myComponent,在style组件加scoped指令，给当前css添加作用域，它只在当前作用域下好用，也就是父集

<template>
  <div id="app">
    <my-component></my-component>
  </div>
</template>

<script>

import myComponent from './components/myComponent'

export default {
  name: 'App',
  components: {
    myComponent
  }
}
</script>

<style scoped>
.fa {
  color: #ccc;
}
.wrap {
  color: blue;
}
</style>