elementUI+Vue搭建新项目安装

新建个文件 然后在点击下方红圈 输入cmd回车打开命令行

vue-cli安装：

npm install -g @vue/cli

创建vue项目：

vue create xxx(自定义名称）

开始创建

选择第三个

因为第三个可以在创建项目时，手动选择需要一起创建的工具。其它两个不能

根据自己的需要选择一起创建的工具

键盘方向键控制上下 空格（选择） 回车（下一步）

这里和您 确认创建vue项目的版本

选择2.x

输入 y

输入 y

这里是和您确认 路由器是否使用 history 模式？（Y：确认 / N：取消）

输入 y

这里是和您确认 sass 版本 

选择第一个

这里是和您确认 语法检测 配置

选择第一个

这里是和您确认 触发语法检测的方式

选择第一个

这里是和您确认 配置文件放置位置

选择第一个  In dedicated config files (单独放置)

这里是和您确认 是否把刚刚配置过的信息 保存为预设模板（保存为预设后，以后在创建项目时就可以选择这个预设模板进行创建）

输入n（也不麻烦 多走走流程 熟练熟练挺好的）

等待 直至出现上面内容为 创建成功

到这一步 Vue已经创建成功 接下来就是安装element组件

1.用Vscode打开刚刚创建好的文件 控制台输入下方指令

npm i element-ui -S

2.修改初始化文件

HomeView.vue修改后的代码为

<template>
  <div>
    主页
  </div>
</template>
 
<script>
export default {
  name: 'HomeView',
}
</script>

 App.vue修改后的代码为

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

增加全局样式

在对应目录下创建global.css

*{
    box-sizing:border-box;
}
body {
    color: #333;
    font-size: 14px;
    /* 外和内边框都为0 */
    margin: 0;
    padding:0;
}

然后将文件引入

router/index.ts修改后代码

import Vue from 'vue'
import VueRouter from 'vue-router'
 
Vue.use(VueRouter)
 
const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/HomeView.vue')
  }
]
 
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
 
export default router

 引入element UI

main.ts修改后代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/css/global.css'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

Vue.use(ElementUI, { size: "small" });

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

至此 安装已全部完成！！！