Java-Vue

最新推荐文章于 2024-07-12 16:26:30 发布

慢柳悠悠

最新推荐文章于 2024-07-12 16:26:30 发布

阅读量96

点赞数 1

分类专栏： Vue 文章标签： java 开发语言笔记 vue.js node.js

本文链接：https://blog.csdn.net/a468366126/article/details/134161075

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

注意：以下全篇写的(c)npm可以使用npm或者cnpm命令代替

一、安装Node

1.安装Node

进入官网选择版本直接下载，无脑下一步，安装成功

查看版本号

命令： node -v

npm -v 是用来查看 Node.js 包管理器 npm（Node Package Manager）的版本号的命令

2.安装镜像(可安可不安)

为了创建项目的时候快一点可以安装中国的镜像网站

命令： npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完以后使用npm命令或者是cnpm命令

注意：由于 cnpm 使用的是淘宝的镜像源，该镜像源可能与官方源存在一些差异，因此在某些情况下可能会出现某些软件包版本落后或缺失的问题。

卸载 cnpm 的方法很简单，只需要运行 npm uninstall -g cnpm 命令即可

3.安装vue-cli

命令： cnpm install -g vue-cli

安装失败可后跟--force强制下载

4.安装webpack

命令： cnpm install webpack -g

5.安装打包的客户端

命令： npm install webpack-cli -g

二、创建项目

1.进入目录

①打开你想要创建项目的路径，在上方搜索框输入cmd进入黑窗口

②直接在黑窗口中使用命令强制进入路径

命令： cd/d 路径

2.创建项目

2.1 创建项目

vue create 项目名

这里提示我们创建是3版本的命令，客户端版本不够建议我们使用下面两个命令提升版本

npm uninstall -g vue-cli 卸载客户端

npm install -g @vue/cli 下载高版本的客户端

再次创建项目 vue create myvue

2.2 手动选择配置

2.3 选择开发工具

上下切换，空格选中，选择Babel(编译器)和Router(路由器)

2.4 选择版本

选择一个你想要开始项目的Vue.js版本

因为3与2有诸多不同，所以先选择2

2.5 是否使用路由器的历史模式

2.6 配置地址

你更倾向于将Babel、ESLint等配置放在哪里？

在package.json中：除了单独的配置文件，你也可以将Babel、ESLint等的配置直接写在项目的package.json文件中的相应字段中。这样可以避免创建额外的文件，并将配置与项目的依赖项一起管理。

2.7 是否设为模板

将此保存为未来项目的预设？

如果觉得可以就设为模板，不满意就不设置

2.8 设置名称

保存预设为？

输入设置名称

耐心等待一会~

2.9 启动项目进行编译

出现下图即为创建项目成功

启动项目，只需要执行下面两条命令即可

cd myvue
npm run serve

黄色信息提示是因为我电脑刷机了，git还没有配置，需要自己提交

2.10 访问

编译成功，可以进行访问

2.11 如何使用模板

首先创建项目

然后我们就可以直接使用模板了，下面的流程依然如上

2.12 启动命令

npm run XXX

xxx的值是由package.json中scripts里面的参数决定的

三、查看项目

1.导入项目

点击文件-导入-从本地目录导入

2.选择我们创建的项目打开

3.src文件

四、路由

1.路由概述

Vue中的路由是指通过URL路径来确定展示哪个组件的方式。Vue提供了Vue Router插件来实现路由功能。

在Vue Router中，路由的配置信息是通过一个JavaScript对象来定义的。该对象包含了路由的路径、对应的组件、以及其他相关信息。其中，路由的路径是通过path属性来指定的，对应的组件则是通过component属性来指定的。

Vue Router是Vue中非常重要的一个插件，它可以帮助我们实现页面的路由功能，并提供了一些方便的API来处理路由相关的逻辑。

2.实现路由

2.1 创建组件

注意：组件中<template></template>里面有且只能有一个根标签

2.2 声明路由

2.3 使用路由

2.4 访问

五、Element-UI

1.安装

命令： npm i element-ui -S

2.使用ui

2.1 加引用

在main.js文件中写入下面的内容

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

2.2 创建组件

在views文件夹下创建需要的新组件

范例：创建main.vue、data.vue、test.vue

实现代码如下：

2.3 声明路由

使用嵌套路由时使用children属性就可以了

2.4组件代码

main.vue代码如下：

<template>
<div>
	<!--左边侧边栏-->
	<el-container>
	  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
	      <el-menu :router="true">
	        <el-submenu index="1">
	          <template slot="title"><i class="el-icon-message"></i>导航一</template>
	          <el-menu-item-group>
	            <template slot="title">分组一</template>
				<el-menu-item index="/data">选项1</el-menu-item>
	            <el-menu-item index="/test">test</el-menu-item>
	            <el-menu-item index="1-2">选项2</el-menu-item>
	          </el-menu-item-group>
	          <el-menu-item-group title="分组2">
	            <el-menu-item index="1-3">选项3</el-menu-item>
	          </el-menu-item-group>
	        </el-submenu>
	        <el-submenu index="2">
	          <template slot="title"><i class="el-icon-menu"></i>导航二</template>
	          <el-menu-item-group>
	            <template slot="title">分组一</template>
	            <el-menu-item index="2-1">选项1</el-menu-item>
	            <el-menu-item index="2-2">选项2</el-menu-item>
	          </el-menu-item-group>
	          <el-menu-item-group title="分组2">
	            <el-menu-item index="2-3">选项3</el-menu-item>
	          </el-menu-item-group>
	          <el-submenu index="2-4">
	            <template slot="title">选项4</template>
	            <el-menu-item index="2-4-1">选项4-1</el-menu-item>
	          </el-submenu>
	        </el-submenu>
	        <el-submenu index="3">
	          <template slot="title"><i class="el-icon-setting"></i>导航三</template>
	          <el-menu-item-group>
	            <template slot="title">分组一</template>
	            <el-menu-item index="3-1">选项1</el-menu-item>
	            <el-menu-item index="3-2">选项2</el-menu-item>
	          </el-menu-item-group>
	          <el-menu-item-group title="分组2">
	            <el-menu-item index="3-3">选项3</el-menu-item>
	          </el-menu-item-group>
	          <el-submenu index="3-4">
	            <template slot="title">选项4</template>
	            <el-menu-item index="3-4-1">选项4-1</el-menu-item>
	          </el-submenu>
	        </el-submenu>
	      </el-menu>
	    </el-aside>
		<!--左边侧边栏-->
	  <el-container>
	    <el-header>Header</el-header>
	    <el-main>
			<!-- 存放组件内容 -->
			<router-view></router-view>	
		</el-main>
	    <el-footer>Footer</el-footer>
	  </el-container>
	</el-container>
</div>

</template>

<script>
</script>

<style>
	  .el-header, .el-footer {
	    background-color: #B3C0D1;
	    color: #333;
	    text-align: center;
	    line-height: 60px;
	  }
	  
	  .el-aside {
	    background-color: #D3DCE6;
	    color: #333;
	    text-align: center;
	    line-height: 200px;
	  }
	  
	  .el-main {
	    background-color: #E9EEF3;
	    color: #333;
	    text-align: center;
	    line-height: 160px;
	  }
	  
	  body > .el-container {
	    margin-bottom: 40px;
	  }
	  
	  .el-container:nth-child(5) .el-aside,
	  .el-container:nth-child(6) .el-aside {
	    line-height: 260px;
	  }
	  
	  .el-container:nth-child(7) .el-aside {
	    line-height: 320px;
	  }
</style>

data.vue代码如下：

<template>
	<div>
		<h1>main</h1>
	</div>
</template>

<script>
</script>

<style>
</style>

test.vue代码如下：

<template>
  <div class="test">
    <el-table :data="tableData">
            <el-table-column prop="date" label="日期" width="140">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
          </el-table>
  </div>
</template>
  

  <script>
    export default {
      data() {
        const item = {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路1518号'
        };
        return {
          tableData: Array(5).fill(item)
        }
      }
    };
  </script>

2.5 代码结构的重要修改

2.6 访问

慢柳悠悠

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java-Vue

Vue中的路由是指通过URL路径来确定展示哪个组件的方式。Vue提供了Vue Router插件来实现路由功能。在Vue Router中，路由的配置信息是通过一个JavaScript对象来定义的。该对象包含了路由的路径、对应的组件、以及其他相关信息。其中，路由的路径是通过path属性来指定的，对应的组件则是通过component属性来指定的。Vue Router是Vue中非常重要的一个插件，它可以帮助我们实现页面的路由功能，并提供了一些方便的API来处理路由相关的逻辑。
复制链接

扫一扫