首页 > 其他分享 >day02-项目实现01

day02-项目实现01

时间:2023-03-05 22:33:59浏览次数:45  
标签:vue 项目 day02 Element 01 router js 路由

项目实现01

1.功能01-搭建Vue前端工程

1.1需求分析

  1. 使用Vue3的脚手架vue-cli工具,创建ssm的前端项目基础开发环境
  2. Vue-cli主要的功能是自动生成Vue的项目模板,提高开发效率

1.2代码实现

1.2.1搭建vue工程

以下命令使用管理员权限

(1)先下载node.js LTS,并安装node.js的npm,用于管理前端项目包依赖。这里安装node.js的14.17.3版本,方便使用Vue3

官网地址:https://nodejs.org/zh-cn/blog/release/v14.17.3/
下载安装,一路点击下一步即可。

安装完毕,在命令窗口输入node -v和npm -v,出现如下字样说明安装成功:

C:\Users\李>npm -v
6.14.13

C:\Users\李>node -v
v14.17.3

(2)全局安装Vue插件cli:npm install -g @vue/cli,这样我们就可以创建Vue工程

安装教程:https://cli.vuejs.org/zh/guide/

D:\apps\nodejs16.18.1\node_global\vue -> D:\apps\nodejs16.18.1\node_global\node_modules\@vue\cli\bin\vue.js
...
+ @vue/[email protected]
added 693 packages from 474 contributors and updated 148 packages in 263.277s

(3)因为我们是前后端分离的,因此新建一个项目,指令vue create <项目名>,输入指令回车后会出现选择:

要使用管理员命令,否则会出错

3.1)手动选择

image-20230305190354435

3.2)选择Babel,Router,Vuex

image-20230305190848703

3.3)选择3.x版本

image-20230305190926477

3.4)选择路由模式

image-20230305191017960

3.5)选择项目依赖包管理方式

image-20230305191328733

3.6)选择是否要保存当前项目的配置

image-20230305191603036

3.7)创建成功:

image-20230305192348603

3.8)依次输入上面提示的命令,运行vue项目:

image-20230305192618645

3.9)浏览器访问端口

image-20230305192804301

1.2.2idea配置vue项目并启动

(1)使用idea打开刚刚创建的Vue项目,点击右上角配置 Add Configuration

image-20230305193322408

(2)配置启动

image-20230305193815585

(3)点击箭头即可启动vue项目

image-20230305194054914 image-20230305194515226

1.3Vue3项目目录结构

image-20230305210931607

(1)public/index.html页面:

  1. index.html页面是项目的首页面
  2. 当App.vue编译后,内容会替换/挂载到 < div id="app">< /div>
...
<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

(2)router/index.js用于配置路由规则,即将组件和路径 path映射

  1. index.js用于指定路由规则(访问url的规则)
  2. path: '/' 表示当访问url为 http://ip:port/时,就访问到 HomeView 的组件,把 HomeView 组件的内容替换给 App.vue的 < router-view/>
  3. HomeView 组件对应的文件就是 ../views/HomeView.vue
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

(3)App.vue页面:

  1. App.vue 页面可以用来布局网站页面

  2. < router-view/> 就是路由指令,会把对应的页面内容替换到< router-view/>的位置

    路由的本质就是一种对应关系,根据不同的 URL请求,返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系,就是路由。)

  3. 路由的规则,比如 http://localhost:8080/ ,则路由的路径就是\,又比如 http://localhost:8080/about ,则路由的path就是 /about

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

<style>
...
</style>

(4)assets 目录和 components 目录:

  1. assets 目录存放项目的静态资源,比如图片,css,js等
  2. components 目录存放组件,在vue中组件可以表示页面

(5)store/index.js 用于存放数据,比如登录后可以将数据存放在这里,或是页面跳转时存放要传递的参数/数据

(6)视图使用的基本介绍

image-20230305211902657

(7)package.json 说明前端项目包的依赖关系,类似于maven的pom.xml

image-20230305212211349

(8)main.js 用于引入资源(css/组件等),同时也是创建App挂载#app,引入./router./store等资源的所在

image-20230305212714000

1.4修改Vue服务端口

在默认情况下vue项目的访问端口为8080,可以在vue.config.js文件下修改启动端口

image-20230305213358226

1.5安装Element Plus插件

Element Plus 是针对 Vue3.0 提供的组件库

  1. Element Plus 是 Element 对 Vue3.0 的升级适配
  2. Element UI 诞生于 2016 年,起初是饿了么内部的业务组件库,开源后深受广大前端开发者的喜爱,成为 Vue 生态中最流行的 UI 组件库之一
  3. Element Plus 是重构的全新项目。Element 团队重写了 Element 的代码,用于支持 Vue3.0
  4. Element UI 还在维护和升级,因为 Vue2 仍被使用,Vue3 支持的浏览器范围有所减少,因此在接下来的一段时间内,vue2 仍然会在项目内使用。

安装element-plus插件

在项目中我们会使用到element-plus插件,因此需要进行安装

使用npm下载插件:npm install element-plus --save(管理员权限)

+ [email protected]
added 21 packages from 25 contributors in 15.67s

5 packages are looking for funding
  run `npm fund` for details

标签:vue,项目,day02,Element,01,router,js,路由
From: https://www.cnblogs.com/liyuelian/p/17181969.html

相关文章

  • P5322 [BJOI2019] 排兵布阵
     小C正在玩一款排兵布阵的游戏。在游戏中有nn座城堡,每局对战由两名玩家来争夺这些城堡。每名玩家有m名士兵,可以向第ii座城堡派遣ai名士兵去争夺这个城堡,使得总......
  • Windows环境下go项目无法执行wire命令
    原因是,路径有问题。需要手动的指定路径。$ROOT_DIR=e/workProject/cloud-base/src/talon/appmakewirewire:generatefailedmake:***[Makefile:17:wire]Error1......
  • 财政收入影响因素分析及预测(2014-2016)
    importnumpyasnpimportpandasaspdimportmatplotlib.pyplotaspltdata=pd.read_csv('./data/data.csv')data#%%x=data.iloc[:,0:-1]y=data.iloc[:,-1]......
  • 01-Redis系列之-Redis介绍安装配置
    Redis初识Redis主要内容1redis介绍,特性,安装和配置,典型应用场景2单线程架构,5大数据类型操作,通用指令和高级API的使用3高级用法(慢查询,管道,shu发布订阅,bitmap位图,Hype......
  • 01-微服务与Spring Cloud
    微服务微服务架构风格是一种将一个单一应用程序开发为一组小型服务的方法,每个服务运行在自己的进程中,服务间通信采用轻量级通信机制(通常用HTTP资源API)。这些服务围绕业务......
  • 财政收入影响因素分析及预测(2014-2016)
    importnumpyasnpimportpandasaspdimportmatplotlib.pyplotaspltimportseabornassnsinputfile=r"C:\Users\asus\Desktop\data.csv"data=pd.read_csv(inputf......
  • 【Android逆向】脱壳项目 frida-dexdump 原理分析
    1.项目代码地址https://github.com/hluwa/frida-dexdump2.核心逻辑为defdump(self):logger.info("[+]Searching...")st=time.time()......
  • Day02.MYSQL高级语法
    MYSQL基础语法回顾MySQL管理数据库创建数据库CREATEDATABASEIFNOTEXISTS数据库名;删除数据库DROPDATABASE数据库名;表的管理查看所有表use数据库名;选......
  • Day01.MYSQL基础语法
    1.web阶段学习方法和特点1.特点:se注重原理,web阶段注重应用,框架ssm注重思想2.数据库:sql语句是独立的。inta=10;intb=20;intc=a+b;3.课堂为主,作业为辅web开始:断奶教......
  • 【Android逆向】脱壳项目frida_dump 原理分析
    脱dex核心文件dump_dex.js核心函数functiondump_dex(){varlibart=Process.findModuleByName("libart.so");varaddr_DefineClass=null;varsymbol......