一、环境准备
1、安装 node.js
下载地址:Node.js
2、检查是否安装成功:输出版本号说明安装成功
注意:如果已经安装,未显示,可能是环境变量没配置
二、搭建 vue 环境
1、全局安装脚手架 vue-cli
在命令行输入:
npm install vue-cli -g (vue-lcli2)
npm install -g @vue/cli (vue-cli3)
报错:
1,遇到这样的错误 果断 切换成 淘宝的镜像源 就行,切换后再次下载。
npm config set registry https://registry.npm.taobao.org
2,npm install命令失败,提示 Cannot read properties of null (reading 'package')。
解决方案:清除缓存npm cache clear --force 之后再重新安装依赖 npm install
2、检查是否安装成功:输出版本号说明安装成功
C:\Users\123>vue --version
@vue/cli 5.0.8
C:\Users\123>vue -V
@vue/cli 5.0.8
报错:
解决方法:
1,下载
npm install -g vue
2,先输入npm config list
3,配置环境变量
此电脑-》属性-》高级系统设置-》环境变量
三、创建 vue 项目
vue-cli3创建项目,vue create 项目名
输入命令:vue create vue3-pdf-project
注意:需要什么自己可以酌情选择
四、配置Element plus
1,文档地址
一个 Vue 3 UI 框架 | Element Plus (element-plus.org)
2,下载安装
npm install element-plus --save
3,完整引入
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus).use(store).use(router).mount('#app')
4,测试
AboutView.vue
<template>
<div class="about">
<h1>This is an about page</h1>
<el-row class="mb-4">
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
</el-row>
</div>
</template>
npm run serve运行
5,一个简单布局使用案例
删除AboutView.vue
修改App.vue和index.js
修改HomeView.vue
<template>
<div class="common-layout">
<el-container>
<el-header class="header">
<!-- <title-type></title-type> -->
<h1 style="color:#12b049">test</h1>
</el-header>
<el-main>
<fill-in-the-blank></fill-in-the-blank>
</el-main>
</el-container>
</div>
</template>
<script>
// @ is an alias to /src
import fillInTheBlank from '@/views/fillInTheBlank.vue'
// import TitleType from '@/views/titleType.vue'
export default {
name: 'HomeView',
components: {
fillInTheBlank,
// TitleType
}
}
</script>
<style scoped>
.header{
background-color: blue;
}
.main{
background-color: aqua;
}
</style>
执行
npm run serve