Vue3
- 通过CLI使用Vue脚手架创建项目
- 使用VSCode编辑器管理项目,引入Element-plus
- 使用Vue UI搭建项目
- 使用Webstrom创建Vue项目
VUE3的文档 https://v3.vuejs/
通过CLI使用Vue脚手架创建项目
1. 安装node
首先你应该有一个node.js,如果没有可以参考安装和使用
2. 安装Vue CLI
Vue CLI的文档 https://cli.vuejs/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的详细步骤
- 打开控制台到到你所在的根目录
- 输入引入指令
npm install element-plus --save
- 等待安装好后,在脚手文件中打package.json查看是否安装好
- 来到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')
- 使用。到文档中随便复制一些组件。我这里有个实例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/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
然后它展示链接,可以使用链接访问
更多推荐
Web篇_06 搭建Vue项目(Vue3+Element Plus+Vue-cli+Webstorm)
发布评论