从头开始Vue项目--1.vue-cli脚手架的搭建

1.安装node.js

进入node.js官网下载合适版本

在终端输入node -v来检查是否安装成功

输入npm -v检查npm是否安装成功

为提高效率，也可以继续安装cnpm和yarn，此处不多做赘述

2.安装脚手架构建工具

终端输入cnpm install -g @vue/cli

通过vue -V检验是否安装成功

3.创建项目

vue create 项目名称（不能包含大写字母）

创建成功后，选择需要的环境vue2或vue3

项目结构创建完成

使用npm run serve可以运行程序（要进入项目目录，不能在根目录下运行）

4.引入elementUI（查看官网）

npm安装：npm i element-ui -S

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

引入element

完整引入

//在 main.js 中写入以下内容,样式文件需要单独引入
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

按需引入

npm install babel-plugin-component -D

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

全局配置

import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });