创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】

简介: 这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。

 🎙座右铭:得之坦然,失之淡然。

💎擅长领域:前端

是的,我需要您的:

🧡点赞❤️关注💙收藏💛

是我持续下去的动力!

目录

一. 简单汇总一下创建过程和步骤 【这个能解决你的问题】

二. 添加router的方式

三. 添加Element-plus的方式

四. 添加Vant

五. 添加Ant Design Vue

六. 添加网络请求Axios


一. 简单汇总一下创建过程和步骤 【这个能解决你的问题】

  1. 输入命令“node -v”查看Node.js环境是否已安装,如果没有安装则需先安装Node.js
  2. 输入命令“npm install yarn -g”安装yarn
  3. 输入命令“yarn -v”查看yarn是否安装成功
  4. 为yarn设置镜像地址:yarn config set registry https://registry.npmmirror.com
  5. 验证镜像地址是否设置成功:yarn config get registry
  6. 切换目录,在该目录下创建项目:yarn create vite <项目名称>
  7. 项目创建完成后,执行如下命令进入项目目录,启动项目:

cd vue-demo

yarn

yarn dev

8. 项目启动后,可以使用URL地址http://127.0.0.1:5173/进行访问。

image.gif 编辑

二. 添加router的方式

yarn add vue-router@4 --save

image.gif

import router from './router.js'
app.use(router)

image.gif

在src中创建一个router.js

src\router.js

import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
    history: createWebHashHistory(),//#的形式
    routes: [
        
        {path:'/',redirect:'/Login'},//重定向
        
        {path:'/Login',name:'Login',component:()=>import('./components/Login2.vue'),meta:{title:'登录界面'}},
        {path:'/MainPage',name:'MainPage',component:()=>import('./components/MainPage.vue'),meta:{isAuth:true,title:'果蔬系统'},
            //子路由
            children:[
                {path:'/',redirect:'/GoodsTable'},
                {path:'WorkInfo',name:'WorkInfo',component:()=>import('./pages/WorkInfo.vue')},
                {path:'WorkNew',name:'WorkNew',component:()=>import('./pages/WorkNew.vue'),meta:{title:'新闻推文'},
                    children:[
                        {path:'WorkNewDetail/:newid/:newtitle/:newcontent?/:img1?/:img2?/:img3?/:img4?',props:true,name:'WorkNewDetail',component:()=>import('./components/WorkNewDetail.vue')}//传递占位符,?代表可以不用传,没有?的一定要传(:/传递名称)
                    ]
                    
                },
                {path:'WorkBusiness',name:'WorkBusiness',component:()=>import('./pages/WorkBusiness.vue')},
                {path:'AboutMe',name:'AboutMe',component:()=>import('./pages/AboutMe.vue')},
                {path:'Addus',name:'Addus',component:()=>import('./pages/Addus.vue')},
                {path:'GroupNumber',name:'GroupNumber',component:()=>import('./pages/GroupNumber.vue')},
                {path:'OtherLink',name:'OtherLink',component:()=>import('./pages/OtherLink.vue'),meta:{title:'供应商管理'}},
                {path:'MainChild',name:'MainChild',component:()=>import('./pages/MainChild.vue')},
                {path:'GoodsTable',name:'GoodsTable',component:()=>import('./pages/GoodsTable.vue'),meta:{title:'商品列表'}},
                {path:'Togoodsstore',name:'Togoodsstore',component:()=>import('./pages/Togoodsstore.vue'),meta:{title:'商品入库'}},
                {path:'NowUser',name:'NowUser',component:()=>import('./pages/NowUser.vue'),meta:{title:'个人用户'}},
                {path:'mainPage',name:'mainPage',component:()=>import('./pages/mainPage.vue'),meta:{title:'首页'}},
            ]//mete自定义的属性
        },
       
    ]
})
//后置路由守卫
router.afterEach((to,from,next)=>{
    document.title = to.meta.title//改变网页名称
})
export default router

image.gif

三. 添加Element-plus的方式

yarn add element-plus@2.2.19 --save
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

image.gif

四. 添加Vant

yarn add vant --save
import Vant from 'vant'
import 'vant/lib/index.css'
 
app.use(Vant)

image.gif

五. 添加Ant Design Vue

yarn add ant-design-vue --save
在main.js中
import AntDesignVue from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
app.use(AntDesignVue)

image.gif

六. 添加网络请求Axios

yarn add axios@1.2.1 --save

在src创建axios\request.js

image.gif 编辑

import axios from 'axios'
const request = axios.create({
    timeout: 2000, // 请求超时时间
})
export default request

image.gif

要使用请求是在使用的组件导入

import request from '../axios/request.js'

image.gif

使用方法

request({
    url: '/mock/getGoodsList',
    method: 'get',
  }).then((res) => {
    // gdata.value = res.data.data 从json获取到数据
    gdata.value = store.state.GoodsList // 从vuex的GoodList获取数据(在本地电脑实现了持久化) 
    console.log('++++++++++++++')
    console.log(gdata.value);
    // store.commit('setGoodsList', gdata.value)
  }).catch((err) => {
    console.log(err);
  })
request({
    url: '/mock/updateGoods', // 配置后端接口 URL
    method: 'post', // 假设是 POST 请求,根据实际情况配置
    data: rowindex, // 发送需要更新的商品信息
  }).then((res) => {
    console.log('商品属性更新成功', res);
    if (res.data.code == 200) {
      ElMessageBox.alert('商品属性更新成功', '提示', {
        confirmButtonText: '确定',
      })
    } else {
      ElMessageBox.alert('商品属性更新失败', '提示', {
        confirmButtonText: '确定',
      })
    }
    
    
    
     request({
    url: '/mock/deleteGoods', // 配置后端接口 URL,假设使用 RESTful 风格的接口
    method: 'delete', // 假设是 DELETE 请求,根据实际情况配置
    data: id
  }).then((res) => {
    console.log('商品删除成功', res);
    if (res.data.code == 200) {
      ElMessageBox.alert('商品属性删除成功', '提示', {
        confirmButtonText: '确定',
      })
    } else {
      ElMessageBox.alert('商品属性删除失败', '提示', {
        confirmButtonText: '确定',
      })
    }

image.gif

在main.js 写入

import axios from 'axios';

image.gif

创建一个Vue项目通常涉及以下几个步骤:

• 安装Node.js和npm/yarn:

• Vue CLI需要Node.js和npm/yarn来运行。确保你的计算机上安装了Node.js和npm/yarn。

• 安装Vue CLI:

• 打开终端或命令提示符,输入以下命令来全局安装Vue CLI:

• 创建Vue项目:

• 使用Vue CLI创建一个新的Vue项目:

• 按照提示选择预设配置,或者自定义配置。

• 进入项目目录:

• 创建项目后,进入项目目录:

• 安装依赖:

• 项目创建后,会自动安装依赖。如果没有,可以运行:

• 运行开发服务器:

• 使用以下命令启动开发服务器,并在浏览器中查看应用:

• 默认情况下,Vue CLI会在`localhost:8080`上启动开发服务器。

• 开发应用:

• 现在你可以开始开发你的Vue应用了。Vue CLI提供了一个热重载服务器,当你修改代码时,浏览器会自动刷新。

• 构建生产版本:

• 当你完成开发并准备部署时,运行以下命令来构建生产版本:

• 构建文件将被输出到`dist/`目录。

• 部署应用:

• 将`dist/`目录中的内容部署到你的服务器或静态文件托管服务。

• 添加路由和状态管理(可选):

• 如果你的应用需要,你可以添加Vue Router和Vuex来管理路由和状态。

• 使用ESLint和Prettier(可选):

• 为了保持代码质量和一致性,你可以集成ESLint和Prettier。

• 单元测试和端到端测试(可选):

• 你可以添加单元测试(使用Jest或Mocha)和端到端测试(使用Cypress或Nightwatch)。

• 持续集成/持续部署(CI/CD)(可选):

• 设置CI/CD流程,自动化测试和部署。

• 性能优化(可选):

• 根据需要,你可以进行代码分割、懒加载、服务端渲染(SSR)等性能优化。

• 发布和维护:

• 发布你的应用,并根据用户反馈进行维护和更新。

以上是创建Vue项目的全过程。每一步都有很多细节和选项,具体取决于你的项目需求和个人偏好。


🎙座右铭:得之坦然,失之淡然。

💎擅长领域:前端

是的,我需要您的:

🧡点赞❤️关注💙收藏💛

是我持续下去的动力!


相关文章
|
7天前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
50 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
8天前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
54 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
7天前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
41 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
9天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
60 12
|
JavaScript 前端开发
Vue入门(1)——简介与安装
本章节大部分内容均摘自官方文档,目前使用的Vue版本为v2.5.17建议参考官方文档,更为详细。写本篇文章,只是为完善【Vue入门】系列,此外,关于如何使用vue-cli3.0搭建一个新项目,以及如何将vue-cli2.0构建的项目升级到vue-cli3.0,可以参考Vue-cli 3.0搭建Vue项目 vue.js是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。
1675 0
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
145 1
|
5天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
5天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
5天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
27天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
54 8