01. 搭建项目环境创建前端Vue工程

软件

VsCode：https://code.visualstudio.com/sha/download?build=stable&os=win32-x64-user

NodeJS（下载最新稳定版）：https://nodejs.org/en/download

检测你本地的环境：

bash

node -v
npm -v

npm 国内镜像：

bash

npm config set registry https://registry.npmmirror.com

VsCode 插件：

Vue - Official：Vue 语法高亮
**Prettier **：Vue 代码格式化

创建 vue 工程

vue 官网：https://cn.vuejs.org/

vue

npm create vue@latest

打开 cmd 创建项目：

vue 工程设置格式化：

json

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none",
  "printWidth": 100
}

搜索打开 **settings.json，**设置文件保存格式化：

json

{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
 "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}

Element-Plus 官网：https://element-plus.org/zh-CN/

安装依赖

bash

npm install element-plus -S

快速开始

css

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

国际化中文配置

javascript

import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, {
  locale: zhCn,
})

图标 icon

bash

npm install @element-plus/icons-vue

全局注册图标

bash

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

配置全局 css 文件 assets/css /global.css

css

* {
  box-sizing: border-box;
}

html,
body,
#app {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 14px;
  color: #303133;
  background-color: #f5f7fa;
}

/* 清除标题默认边距 */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

/* 清除列表默认样式 */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 链接 */
a {
  color: inherit;
  text-decoration: none;
}

/* 图片 */
img {
  max-width: 100%;
}

main.js

javascript

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import '@/assets/css/global.css'

const app = createApp(App)

app.use(router)
app.use(ElementPlus, {
  locale: zhCn
})
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.mount('#app')