vue-cli（1）

一、安装vue-cli

1、打开cmd，输入npm install -g @vue/cli

2、vue --version 检查安装版本，需在4.5及以上

二、创建项目

1、vscode资源管理器右键打开终端，选择默认配置文件为command prompt

2、用vue脚手架工具创建项目，项目名称（不要有中文和大写字母）自定义 ： vue create demo +回车

3、选择Default（[Vue2],babel,eslint）+回车 --默认创建vue2

4、选择npm+回车

demo下出现public文件夹（静态目录），src文件夹（代码目录），node_modules等文件。
src里面有assets文件夹，主要存放图片，图标，字体等资源；components文件夹存放组件，每一个组件都是单独一个文件，每一个文件由三部分组成，分别是模板：template；script：js代码；style：样式。App.vue是全局文件，main.js是入口文件（核心）

5、终端输入 cd demo 跳转到demo

6、npm run serve +回车-- 在开发中运行

底部显示
Local: http://localhost:8080/
Network:http://192.168.0.113:8080/
按住Ctrl点击任意一个可打开创建的项目页面

三、打包项目

1、终端输入npm run build

这时demo目录下会出现dist文件夹，这是打包之后的资源，是把src以及node_modules的生产依赖资源打包

四、新建组件

1、在components文件夹下新建一个组件Child.vue(一般组件名开头大写）

<template>
<div class="child">
    <h3>{{title}}</h3>
</div>
</template>

<script>
// 每个组件，其实都是一个导出的对象
export default {
name:'Child',
// 注意：组件里面的data一定要是一个方法，由方法返回对象
data() {
    return {
        title:'我是Child组件'
    }
},
}
</script>

<style>
.child{
    border: orange 1px solid;
    padding: 10px;
}
</style>

2、使用组件的步骤

1、在App.vue文件中导入

import Child from './components/Child.vue'

2、第二步：注册组件

export default {
       components: {
            Child
             },
         }

3、使用组件

<template>
  <div id="app">
    <h2>{{ title }}</h2>
    <Child> </Child>
  </div>
</template>

五、安装element-ui组件库

1、终端输入npm install element-ui -S

2、在main.js文件中导入 elementUI

import ElementUI from 'element-ui';

3、导入elementUI组件库的样式

import 'element-ui/lib/theme-chalk/index.css';

4、由于elementUI是组件库，所以必须要use一下

Vue.use(ElementUI);