Vue+ElementUI—环境搭建

Vue+ElementUI—环境搭建
文章结构
1、概念简介

 2、环境搭建

参考教程：https://sitin.blog.csdn.net/article/details/103607472?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-103607472-blog-114360649.pc_relevant_multi_platform_featuressortv2dupreplace&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-103607472-blog-114360649.pc_relevant_multi_platform_featuressortv2dupreplace&utm_relevant_index=1

2.2、vue3

菜鸟教程：https://www.runoob.com/vue3/vue3-tutorial.html
中文教程：https://staging-cn.vuejs.org/guide/introduction.html
- 前置准备
```
cnpm install -g @vue/cli
1
```
方式一：
```
vue init webpack ${project_name}
1
```
初始化过程选项：
```
E:\PythonProject\webpro>vue init webpack pyqt5

? Project name pyqt5
? Project description A Vue.js project
? Author CoderGaozh <891928685@qq.com>
? Vue build standalone      
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "pyqt5".

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
```
方式二：
- 项目构建
注意：cnpm init @vitejs/app ${project_name}方式已经弃用；
```
npm create vite@latest
1
```
说明：按需输入项目名称等；
```
cd ${project_dir}

cnpm install
cnpm run dev
1
2
3
4
```
说明：按照输出信息打开初始化页面；
```
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue实例title>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js">script>
head>
<body>
<div id="hello-vue" class="demo">
  {{ message }}
div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
```
引入方式有3种：
A：下载到本地，在

文章结构

1、概念简介

2、环境搭建

2.2、vue3