Web篇_06 搭建Vue项目（Vue3+Element Plus+Vue-cli+Webstorm）

---

VUE3的文档 https://v3.cn.vuejs.org/

通过CLI使用Vue脚手架创建项目

1. 安装node

首先你应该有一个node.js，如果没有可以参考安装和使用

2. 安装Vue CLI

Vue CLI的文档 https://cli.vuejs.org/zh/
安装：

npm install -g @vue/cli

3. 创建项目
随意进入一个项目目录，执行vue create vue3_test

D:\>cd workspace-neusoft\training\preview

D:\workspace-neusoft\training\preview>vue create vue3_test

然后看准是vue3，双击回车

等待创建项目

看日志，这就创建成功了，它还提示了运行项目的命令

可以到磁盘中查看

4. 运行项目

>cd vue3_test
>npm run serve

这样项目就运行成功了
它给出了访问的地址，在浏览器中访问即可

目录解释

node_modules：整个项目所有的依赖
public:静态资源，不会被vue编译
.eslintrc.js：代码检查库配置
package.json:项目相关配置
src：后期业务目录
–>assets：会被编译的静态文件夹
–>components:项目组件
–>main.js:项目入口
–>app.vue:项目根模块
–>views:所有页面
–>store：全局状态管理
–>router:路由

使用VSCode编辑器管理项目，引入Element-plus

将刚才创建的项目使用vscode打开

项目目录如下
当然你也可以在vscode的终端使用windows命令行中的一切命令，如果是项目命令注意要到项目的根目录执行。

启动项目

按快捷键ctrl+C可以停止服务。

vue3引入Element-plus的详细步骤

1. 打开控制台到到你所在的根目录
2. 输入引入指令

npm install element-plus --save

3. 等待安装好后，在脚手文件中打package.json查看是否安装好
   
4. 来到main.js文件之中，导入element-plus
   你可以参考文档中的引入方式

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 导入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(store).use(router)
app.use(ElementPlus)
app.mount('#app')

5. 使用。到文档中随便复制一些组件。我这里有个实例element的tab表格，建议创建一个组件测试，也可以全部复制到APP.vue文件中

<template>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>
  
<script setup>
  const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

预览效果

使用Vue UI搭建项目

我使用Vue ui搭建项目，原因是简单，易于管理，图形化易操作。

1. 安装node

首先你应该有一个node.js，如果没有可以参考安装和使用

2. 安装Vue CLI

Vue CLI的文档 https://cli.vuejs.org/zh/

vue-cli是官方发布的vue项目脚手架，可以用来快速创建项目，我们本文所用到的vue ui就是基于vue cli封装的。

安装：

npm install -g @vue/cli

3. 创建项目
创建一个项目：

vue ui

这个命令输入后，稍等，它会打开Vue项目管理器

在“创建”输入创建项目的目录：

点击在此创建项目，输入项目名，建议初始化git

如果你已经很熟悉使用这个工具了，那你可以通过预设创建项目，提供效率。
第一次用的话，建议手动配置熟悉一下


选择vue3项目，然后点击创建项目

是否保存预设看你自己

创建项目时，命令窗口有日志

创建成功后自动进入到项目仪表盘

之后这个项目还需要引入axios、elementUI plus等我们需要的依赖，注意安装的依赖是安装在当前这个项目中的。


安装好后，我们可以在这个项目的package.json文件查看安装的依赖：

element UI plus也是这样安装的，选择2版本的就好

使用Webstrom创建Vue项目

我这里使用IDE创建的方式与上面的原理一致，一样需要安装vue cli

在这里选择Vue.js，还有vue cli脚手架，这个需要你安装的，上文有介绍

等会就创建好了

由于是使用vuecli3来构建的项目相较于vuecli2来说少了cnfig目录
要是想配置端口转发的话，需要自己在项目根目录创建一个 vue.config.js 的文件在里面做端口转发操作

接下来引入测试ElementPlus，首先你应该确保整合了该框架

在main.js中，引入Element Plus

文档地址

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import store from './store'


const app = createApp(App)

app.use(store).use(router).use(ElementPlus).mount('#app')

然后启动运行项目：

然后在如下文件中粘贴文档中的一些元素效果

测试：
在terminal中运行命令npm run serve
然后它展示链接，可以使用链接访问