创建一个vue3项目

一、环境准备

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