Vue脚手架

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量1.2k 收藏 10
点赞数 22
分类专栏： 3-web 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76721962/article/details/136611176
版权

Vue脚手架

学习目标：

  • 理解Node.js基本使用方法
  • 理解包资源管理器NPM的使用
  • 理解webpack的作用
  • 理解 vue-cli 脚手架 (重点)
  • Element-UI 组件库
1.vue的格式：
	new Vue({
        //作用的视图
        el:"id选择器",
        //vue中的数据
        /*data:{
            key:value,
            key:value,
            ...
        }*/
        data(){
            return {
                    key:value,
                    key:value,
                    ...
            }
        },
        //vue的函数
        methods:{
            test01:function(){
                ....
            },
            test02(){
                
            },
                ...
        },
        //生命周期函数
        created(){
            //vue对象创建完毕执行，准备数据，然后数据在mounted的时候挂载到视图上
        }
    });
 2.vue常见指令：
 	1）<标签名 v-html="data中的数据"></标签名> 文本插值，将data中的数据放到标签文本中，解析html标签  插值表达式{{}}不解析html标签，不能使用在属性中
    2）<标签名 v-bind:属性名="data中的数据"></标签名> 简写 <标签名 :属性名="data中的数据"></标签名> 给标签绑定任意属性
    3）<标签名 v-on:事件名="vue中的函数"></标签名> 简写 <标签名 @事件名="vue中的函数"></标签名> 事件名需要去掉on
    4)<标签名 v-model="vue中的数据"></标签名>双向数据绑定，脚本改变，视图改变，视图改变，脚本也改变
    5）<标签名 v-for="变量名 in 容器或者对象名">{{变量名}}</标签名> 循环
    6) <标签名 v-if="判断条件">文本</标签名>
	   <标签名 v-else-if="判断条件">文本</标签名>
		....
       <标签名 v-else>文本</标签名>
	如果满足某个条件，那么就显示文本
    7）<标签名 v-show="判断条件">文本</标签名>如果满足某个条件，那么就显示文本,不满足就隐藏 display:none

1.Node.js

1 什么是Node.js

官网：https://nodejs.org/zh-cn/ 
中文学习网：http://nodejs.cn/learn

1.Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。

2.前端的底层 html,css和 js, 这些都不需要编译 , 由浏览器解释运行(解释型语言)

3.我们可以将Node.js理解成java的 JDK

4.Node.js 的包管理器 npm,是全球最大的开源库生态系统。

​

小结：Node.js 是一个开源和跨平台的 JavaScript 运行时环境，功能类似于浏览器。

2 Node.js安装

1、下载对应你系统的Node.js版本:https://nodejs.org/en/download/

历史版本：https://nodejs.org/zh-cn/download/releases/

（我们现在使用的版本是v12.21.0，资料\安装包\2_nodejs 也已提供）

2、选默认即可进行安装

不要修改安装路径! 不然需要配置环境变量，比较麻烦

3、测试，在命令提示符下输入命令 node -v

会显示当前node的版本
在这里插入图片描述

3 快速入门

1 控制台输出

我们现在做个最简单的小例子，演示如何在控制台输出。

课程案例使用 Vscode 软件。

【1】创建 demo1.js 文件，代码内容：

let a=1;
let b=2;
console.log(a+b);

【2】在文件上右键，选择在集成终端中打开

在这里插入图片描述

【3】我们在命令提示符下输入命令

node demo1.js

在这里插入图片描述
在这里插入图片描述

2 使用函数

创建文本文件demo2.js

function add(a,b){
	return a+b;
}
let c=add(100,200);
console.log(c);

命令提示符输入命令

node demo2.js

运行后看到输出结果为300

在这里插入图片描述

3 模块化编程

node的exports和require(模块化)

创建文本文件demo3_1.js

exports.add=function(a,b){ // 导出
	return a+b;
}

创建文本文件demo3_2.js

let demo= require('./demo3_1');  // 导入 ./ 必须书写，表示使用当前路径导入demo3_1文件的内容
console.log(demo.add(400,600));

我们在命令提示符下输入命令

node demo3_2.js

结果为1000

在这里插入图片描述

2 npm 包管理器

1 什么是npm

​ npm全称 Node Package Manager，是 Node.js 标准的软件包管理器。

​ 在 2017 年 1 月时，npm 仓库中就已有超过 350000 个软件包，这使其成为世界上最大的单一语言代码仓库，并且可以确定几乎有可用于一切的软件包。

它起初是作为下载和管理 Node.js 包依赖的方式，但其现在也已成为前端 JavaScript 中使用的工具。

npm 有很多功能。

可以把它看成maven中包依赖管理那部分

2 npm命令

2.1 初始化工程

init命令是工程初始化命令。

建立一个npmdemo空文件夹，在命令提示符进入该文件夹 执行命令初始化

npm init

在这里插入图片描述
在这里插入图片描述

按照提示输入相关信息，如果是用默认值则直接回车即可。

  • name: 项目名称
  • version: 项目版本号
  • description: 项目描述
  • keywords: {Array}关键词，便于用户搜索到我们的项目

在这里插入图片描述

最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml

{
  "name": "npmdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

我们之后也可以根据需要进行修改。

在这里插入图片描述

2.2 本地安装(了解)

install命令用于安装某个模块，如果我们想安装express模块（node的web框架），输出命令如下：

npm install express

在这里插入图片描述

出现黄色的是警告信息，可以忽略，请放心，你已经成功执行了该命令。

在该目录下已经出现了一个node_modules文件夹 和package-lock.json

  • node_modules文件夹用于存放下载的js库（相当于maven的本地仓库）

  • package-lock.json是当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新。

我们再打开package.json文件，发现刚才下载的express已经添加到依赖列表中了。

在这里插入图片描述

# 关于版本号定义：
1. 指定版本：比如 `1.2.2`，遵循 **“大版本.次要版本.小版本”** 的格式规定，安装时只安装指定版本。
2. 波浪号（tilde）+指定版本：比如~1.2.2，表示安装1.2.x的最新版本（不低于1.2.2），但是不安装1.3.x，也就是说安装时不改变大版本号和次要版本号。
3. 插入号（caret）+指定版本：比如ˆ1.2.2，表示安装1.x.x的最新版本（不低于1.2.2），但是不安装2.x.x，也就是说安装时不改变大版本号。需要注意的是，如果大版本号为0，则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。
4. latest：安装最新版本。

2.3 全局安装(掌握)

刚才我们使用的是本地安装，会将js库安装在当前目录(node_modules)，只对当前工程有效, 而使用全局安装会将库安装到你的全局目录下。

如果你不知道你的全局目录在哪里，执行命令

-g global 全局

npm root -g

我的全局目录在

C:\Users\tians\AppData\Roaming\npm\node_modules

注意：第一次执行命令npm root -g的时候是找不到node_modules目录，因为之前没有任何安装命令，所以我们直接找到C:\Users\tians\AppData\Roaming\npm目录是可以的，当执行下面的安装命令就会生成node_modules目录

比如我们全局安装vue, 输入以下命令

npm install vue -g

在这里插入图片描述

2.4 批量下载

我们从网上下载某些代码，发现只有package.json,没有node_modules文件夹，这时我们需要通过命令重新下载这些js库.

进入目录（package.json所在的目录）输入命令

npm install

此时，npm会自动下载package.json中依赖的js库.

2.5 淘宝NPM镜像【建议使用】

有时我们使用npm下载资源会很慢，所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。

输入命令，进行全局安装淘宝镜像。

注意：需要保证网络畅通。

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

安装后的效果：

在这里插入图片描述

注意：由于在第一次下载的时候会在npm的目录有如下内容：

在这里插入图片描述

如果想重新下载需要将其删除之后再重新下载。

安装后，我们可以使用以下命令来查看cnpm的版本

如果安装之后有问题, 请查看 资料\问题

cnpm -v

使用cnpm

cnpm install -g 需要下载的js库
例如：
 cnpm install -g axios

2.6 运行工程

这个待会使用!!!

如果我们想运行某个工程，则使用run命令

如果package.json中定义的脚本如下：

  • dev是开发阶段测试运行

  • build是构建编译工程

  • lint 是运行js代码检测

npm run dev

2.7 编译工程

这个待会使用!!!

我们接下来，测试一个代码的编译.编译后我们就可以将工程部署到nginx中啦~

编译后的代码会放在dist文件夹中，首先我们先删除dist文件夹中的文件,进入命令提示符输入命令

npm run build

生成后我们会发现只有个静态页面，和一个static文件夹

这种工程我们称之为单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

这里其实是调用了webpack来实现打包的，关于webpack我们后续的章节进行介绍

3 Webpack

1 什么是Webpack

https://webpack.js.org/ (官网)

webpack 是一个现代 javascript 应用程序的 静态模块打包器 (module bundler)

待会要学的 vue-cli 脚手架环境, 集成了 webpack, 所以才能对各类文件进行打包处理

在这里插入图片描述

webpack是一个 静态模块 打包器,可以做以下的这些工作

  1. 语法转换(主要是浏览器兼容)

    • less/sass转换成css
    • ES6转换成ES5
    • …

  2. html/css/js 代码压缩合并 (打包)

  3. webpack可以在开发期间提供一个开发服务器

可以把它看成maven中工程自动化那部分(war) ,前端项目也是先打包再上线

2 Webpack安装

全局安装

cnpm install webpack@4.41.5 -g
cnpm install webpack-cli@3.3.12 -g

安装后查看版本号

webpack -v
webpack-cli -v

3 快速入门 (js打包)

方式一：webpack原始方式

（1）新建文件夹 work3，在创建src文件夹，创建 bar.js

exports.info=function(str){
   document.write(str);
}

（2）src下创建logic.js

exports.add=function(a,b){
	return a+b;
}

（3）src下创建main.js

var bar= require('./bar');
var logic= require('./logic');
bar.info( 'Hello world!'+ logic.add(100,200));

说明：上述具有多个js文件，那么我们在实际开发中使用的时候会导入过多的js文件，使用起来不方便，那么我们可以将上述多个js文件打包成一个js文件。

（4）创建配置文件webpack.config.js ，该文件与src处于同级目录

var path = require("path"); // 导入 node.js 中专门操作路径的模块，固定写法
//执行webpack命令的时候会读取到module.exports中的内容
module.exports = {
    //执行webpack命令的时候,读取入口main.js，由于main.js关联bar.js和logic.js，所以会将这三个js文件合并到一个js文件中
	entry: './src/main.js', // 打包入口文件的路径
    //输出文件位置
	output: {
        //__dirname表示当前工程目录
		path: path.resolve(__dirname, './dist'),  // 输出文件的存放路径
		filename: 'bundle.js'  // 输出文件的名称
	}
};

以上代码的意思是：读取当前目录下src文件夹中的main.js（入口文件）内容，把对应的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

webpack 的 4.x 版本中默认约定：

  • 打包的入口文件为 src -> main.js

  • 打包的输出文件为 dist -> index.js

（5）执行编译命令

webpack

执行后查看bundle.js 会发现里面包含了上面两个js文件的内容

（6）创建index.html ,引用bundle.js

<!doctype html>
<html>
  <head>  
  </head>
  <body>   
    <script src="dist/bundle.js"></script>
  </body>
</html>`

创建完毕,完整目录如下

在这里插入图片描述

测试调用index.html，会发现有内容输出：Hello world!300

方式二：基于NPM方式

  1. 新建项目空白目录，并运行npm init –y 命令，初始化包管理配置文件package.json

    -y 可以直接跳过配置

    在这里插入图片描述
    在这里插入图片描述

  2. 新建 src 源代码目录,并且把 bar.js 和 logic.js 和 main.js 文件复制到 src目录

  3. 创建index.html ,引用bundle.js

    <!doctype html>
<html>
  <head>  
  </head>
  <body>   
    <script src="dist/bundle.js"></script>
  </body>
</html>

  4. 运行 npm install webpack webpack-cli 命令，安装webpack相关的包

    如果全局安装过webpack 和 webpack-cli工具, 此步骤可跳过

  5. 在项目根目录中，创建名为webpack.config.js 的 webpack配置文件同上

    var path = require("path");
module.exports = {
	mode: 'development', // mode 用来指定构建模式development、production
	entry: './src/main.js',
	output: {
		path: path.resolve(__dirname, './dist'),
		filename: 'bundle.js'
	}
};

    mode: ‘development’ //mode 用来指定构建模式、production：生产模式（压缩）

  6. 在 package.json 配置文件中的scripts节点下，新增dev脚本如下：

    {
  "name": "work4",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"  //script 节点下的脚本，可以通过 npm run 执行
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

    完整代码结构：

在这里插入图片描述

在终端中运行 npm run dev 命令，启动webpack进行项目打包。

在这里插入图片描述

注意是在package.json 包下运行该命令

点击index.html文件查看结果, 会发现有内容输出：`Hello world!300

说明：使用npm命令运行的原因是后期使用webpack命令的时候，命令会很多，不仅仅只有webpack几个字母，不好记，而使用：npm run dev命令执行无论webpack命令有多少都会执行。

4 webpack-dev-server 开发服务器

4.1 介绍

修改main.js代码如下：
在这里插入图片描述

需要每次在修改源码之前需要重新打包：

在这里插入图片描述

每次修改代码, 都需要重新打包, 才能看到最新的效果, 且实际工作中, 打包非常费时 (30s - 60s) 之间

为什么费时?

  1. 构建依赖
  2. 读取对应的文件, 才能加载
  3. 用对应的 loader 进行处理
  4. 将处理完的内容, 写入到 dist 目录

简而言之就是我们希望修改源码完毕之后，不用再每次重新打包，运行的结果直接是修改后的结果。

解决方案：我们可以开启一个开发服务器webpack-dev-server, 在电脑内存中打包, 缓存一些已经打包过的内容, 只重新打包修改的文件 (热更新)

4.2 使用

如果模块(work3)下，没有package.json 文件，那么需要在模块下初始化命令：npm init即可

  1. 修改 package.json -> scripts 中的 dev, dependencies, devDependencies如下：

    devDependencies这是开发时依赖, 上线不依赖

{
  "name": "work4",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.12"
  },
  "devDependencies": { 
    "webpack-dev-server": "^3.11.2"
  }
}

然后运行 cnpm install 指令,安装webpack,webpack-cli 和 webpack-dev-server

  1. 修改 webpack.config.js 文件,添加 devServer
var path = require("path");
module.exports = {
	mode: 'development', // mode 用来指定构建模式development、production
	entry: './src/main.js',
	devServer: {
		port: 8099,// 服务器占用8099端口
		open: true  // 自动打开浏览器
	},
	output: {
		path: path.resolve(__dirname, './dist'),
		filename: 'bundle.js'
	}
};

  1. 删除之前的dist目录

  2. 将 index.html 中，script 脚本的引用路径

    <!doctype html>
<html>
  <head>  
  </head>
  <body>   
    <!-- 内存中读取 -->
    <script src="/bundle.js"></script>
  </body>
</html>

  3. 运行 npm run dev 命令

  4. 在浏览器中访问 http://localhost:8099地址，查看自动打包效果

webpack-dev-server 会启动一个实时打包的 http 服务器

webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，基于内存

4 vue-cli 脚手架(重点)

1 脚手架介绍

vue-cli也叫vue脚手架,vue-cli是vue官方提供的一个全局命令工具，这个命令可以帮助我们快速的创建一个vue项目的基础架子。

脚手架：搭建好的一个架子，我们在架子上进行开发

  • 开箱即用
  • 零配置
  • 基于webpack、webpack-dev-server

https://cli.vuejs.org/zh/guide/

2 快速入门

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

【1】切换到当前项目目录：

在这里插入图片描述
在这里插入图片描述

使用cd 命令切换

【2】在项目目录下执行下面的命令

cnpm install vue-cli -g    # 只需安装一次， 可以使用cnpm安装,通过

# Windows使用 `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
# work5是模块名字
vue init webpack work5

#Mac 使用
sudo vue init webpack vuedemo

##查看vue版本
vue --version
  • 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

效果：
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

如果安装vue脚手架之后, vue init命令无法识别, 可以尝试在vscode在任务管理器中关闭进程,再启动

在这里插入图片描述

说明：use ESLint to lint …表示代码检测，不需要，所以设置为no

在这里插入图片描述

注意：时间会长一点，有可能几分钟。

下载成功后如下显示：
在这里插入图片描述

  • 然后到模块目录下运行 (cd 工程名 )

在这里插入图片描述

npm run dev

在这里插入图片描述

浏览器访问 http://localhost:8080/#/

或者在vscode终端中按住ctrl键，点击鼠标左键即可访问，如下：
在这里插入图片描述

  • 退出服务器, 两下ctrl+c

在这里插入图片描述

3 基础介绍

3.1 服务器设置

【1】问题：为什么执行上述命令npm run dev，就可以使用浏览器访问网址?

1.使用npm命令的时候我们首先需要找到vue脚手架中的package.json文件
在这里插入图片描述

在该文件中具有webpack-dev-server，它表示开发服务器命令，该命令要读取build目录下的配置文件webpack.dev.conf.js

在这里插入图片描述

【2】webpack.dev.conf.js文件说明：

1

2.webpack.base.conf配置文件：

在这里插入图片描述

在这里插入图片描述

conf/index.js

注意：对于该文件我们必须掌握如何修改开发服务器的几个配置即可，上述的内容了解即可
在这里插入图片描述

proxyTable: { //代理配置(能够发送跨域请求)
      "/": {
                target: "http://localhost:8080",
                changeOrigin: true
              }
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8090, //修改成8090避免跟tomcat8080冲突
    autoOpenBrowser: true, // npm run dev 自动打开浏览器

【3】修改index.js文件的参数
在这里插入图片描述

【4】在终端执行如下命令：
在这里插入图片描述

此时就会自动打开浏览器：

在这里插入图片描述

小结：
在这里插入图片描述

说明：最后我们只需要关注config目录下的index.js文件，修改内容如下：

在这里插入图片描述

3.2 目录分析

在这里插入图片描述

1. index.html是页面, 不用动,提供一个最基础的页面
2. src/main.js是入口程序, 不用动, 渲染了App.vue组件
3. src/App.vue是根组件, 默认有很多的内容，可以编辑

【1】index.html页面说明

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>work5</title>
 </head>
 <body>
   hello vue
   <div id="app"></div>
   hello vue1
   <!-- built files will be auto injected -->
 </body>
</html>

页面效果：

在这里插入图片描述

说明：接下来我们要学习如何在index.html页面上使用标签

显示如上页面的内容。

【2】main.js

1.src/main.js是入口程序, 不用动, 渲染了App.vue组件

2.main.js文件代码

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
//vue脚手架需要导入vue
import Vue from 'vue'
//导入src下面的App.vue文件
import App from './App'
//这里是路由，我们下面讲解，这里先不需要知道
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //路由
  router,
  //组件
  components: { App },
  template: '<App/>'
})

在这里插入图片描述

【3】App.vue

1.src/App.vue是根组件, 默认有很多的内容，可以编辑

2.代码

<!--
	1.template相当于body标签
-->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>
<!--书写js代码-->
<script>
export default {
  name: 'App'
}
</script>
<!--书写css代码-->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在这里插入图片描述

vue单文件组件的说明

一个.vue文件就是一个组件,后续开发vue，所有的功能都是基于组件实现。

安装插件(.vue文件才会有提示)

注意：vscode默认不支持vue,.vue文件是vue脚手架特有的，不像.html .css等通用性文件，所以需要安装如下插件
在这里插入图片描述

一个单文件组件由三部分构成

  • template(必须) 影响组件渲染的结构 html
    • 只能有一个根元素
  • script 逻辑 js
  • style 样式 css

案例 App.vue

<template>
    ·<!--书写html标签，只有一个根标签-->
  <div id="app">
    <!-- <img src="./assets/logo.png">
    <router-view/> -->
    ·<!--插值表达式-->
     <span>{{msg}}</span>
  </div>
</template>

<script>
//书写vue代码
export default {
  data(){
    return {
      msg : "hello vue"
    }
  }
}
 /*
 	以后不用这样书写了
 	new Vue({
 		data(){
 			return {
 				msg:"hello vue"
 			}
 		}
 	});
 */
</script>

<style>
  /*书写css样式*/
  span{
    color : red
  }
</style>

小结：

1.template标签中只能有一个根标签
在这里插入图片描述

2.在App.vue中以后不用再书写

new Vue({
 		data(){
 			return {
 				msg:"hello vue"
 			}
 		}
 	});

直接导出：

<script>
  export default {
  data(){
    return {
      msg:"hello vue"
    }
  }
  }
</script>

在这里插入图片描述

3.3 路由

介绍

前端的路由指的是路径和组件(.vue结尾的文件)的映射关系

【1】

在这里插入图片描述

【2】
在这里插入图片描述

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/', // 这里的路径/映射到组件component的HelloWorld
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

1.以上说明 路径 / 映射 组件HelloWorld

2.组件输出位置 用标签

在这里插入图片描述

在根组件App.vue中使用标签引入HelloWorld组件内容。

在这里插入图片描述

一般组件放在 src/views(或pages) 文件夹 和 src/components文件夹

练习

目的：页面（组件）、路由配置

需求：模拟网易云音乐
在这里插入图片描述

实现：

1、在src目录下创建 views 文件夹

2、在views文件夹下创建 userList.vue 组件文件

在这里插入图片描述

<template>
	<!--有且只有一个根标签-->
    <div>
         {{name}}
    </div>
</template>

<script>
export default {
    data(){
        return {
            name : "张三"
        }
    }
}
</script>

<style>

</style>

3、在 router/index.js 下定义页面路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import userList from '@/views/userList' //引入新的组件

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    { // 定义组件的路径
      path: '/users',//随便定义,组件路径
      name: 'userlist', //随便定义，组件名
      component: userList //需要和上面的import userList from '@/views/userList' import后面的userList一致
    }
  ]
})

说明：至于在根组件App.vue中引入哪个组件由用户在浏览器地址栏上输入哪个组件的路径决定的：

在这里插入图片描述

  1. 修改根组件App.vue

    <template>
  <div id="app">
    <img src="./assets/logo.png"> 
    <!-- 注意：这里需要加# -->
    <a href="#/">发现vue</a>
    <a href="#/users">发现好友</a><br>

    <!-- 组件的输出位置 -->
    <router-view/>

  </div>

</template>

<script>

</script>

<style>

</style>

4、控制台使用 npm run dev 运行

浏览器输入 ： http://localhost:8090/#/

在这里插入图片描述

在这里插入图片描述

# 1.对于index.html和main.js文件我们不需要修改
# 2.main.js文件引入根组件App.vue
# 3.根组件App.vue包含其他组件即components目录或者自己创建的views目录下的组件，组件以 .vue结尾的文件
# 4.修改完组件一定要修改路由
# 5.自己的图片一般存放在static目录下

5 Element-UI组件库

网站快速成型工具Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

1 安装

element官网：

https://element.eleme.cn/#/zh-CN/component/installation

  1. 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

    cnpm i element-ui -S

在这里插入图片描述

在这里插入图片描述

说明：i是install的首字母

  1. 导入Element-UI 相关资源

    在这里插入图片描述

    在main.js中添加如下配置：

      // 导入组件库
  import ElementUI from 'element-ui';
  // 导入组件相关样式
  import 'element-ui/lib/theme-chalk/index.css';
  // 配置 Vue 插件
  Vue.use(ElementUI);

在这里插入图片描述

2 快速入门

需求：实现elementui中的表格

  1. 新增 views/elementview.vue

    在这里插入图片描述

    这里的内容来自elementui组件使用

    <template>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>

<style>

</style>

    1. 到router/inidex.js中配置路径

      import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import userList from '@/views/userList' //引入新的组件
import ElementView from '@/views/elementView' //引入新的组件

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    { // 定义组件的路径
      path: '/userlist',
      name: 'userList',
      component: userList
    },
    { // 定义组件的路径
      path: '/elementview',
      name: 'ElementView',
      component: ElementView
    }
  ]
})

    2. 修改App.vue

      <template>
  <div id="app">
    <img src="./assets/logo.png"> 
    <a href="#/">发现vue</a>
    <a href="#/userlist">发现好友</a>
    <a href="#/elementview">elementui使用</a>
    <br>
    <!-- 组件的输出位置 -->
    <router-view/>
     <!-- <span>{{msg}}</span> -->
  </div>

</template>

<script>
export default {
  data(){
    return {
      msg : "hello vue"
    }
  }
}
</script>

<style>
  span{
    color : red
  }
</style>

    3. 结果：
      在这里插入图片描述

6. 综合案例

1.前后端分离介绍

# 前后端分离
	业务分离 : 界面交互业务归前端, 数据逻辑管理归后端
	开发分离 : 前端开发前端项目, 后端开发后端项目
	部署分离 : 前端项目部署在服务器A上, 后端项目部署在服务器B上

2.后端项目环境搭建

  • 进入到day04-Element&Vue脚手架\02_代码\授课素材\后端项目目录下，输入cmd打开dos窗口

在这里插入图片描述

  • 在dos窗口输入如下命令启动后台项目
java -jar studentManager.jar

在这里插入图片描述

  • 数据库

在这里插入图片描述

3.前端项目环境搭建

  1. 素材/前端项目

在这里插入图片描述

2.直接复制到vscode工程下,然后cd到工程目录下,然后执行 cnpm install 安装(package.json中的依赖)

在这里插入图片描述

安装之后：

在这里插入图片描述

  1. 最后 执行npm run dev 命令启动服务器

在这里插入图片描述

4.用浏览器访问项目

在这里插入图片描述

在这里插入图片描述

4.前端项目分析

【1】config/index.js文件

修改访问后台服务器的ip地址和端口号

在这里插入图片描述

【2】

在这里插入图片描述

【3】App.vue 根组件

  • 在这里插入图片描述

  • 在这里插入图片描述

在这里插入图片描述
age-20211216113602654.png&pos_id=img-5nwsw2MU-1710082256793)

【4】stuList.vue组件

  • axios的使用

在这里插入图片描述

I. 安装
   npm install axios -S 
II. .vue页面导入axios
   import axios from 'axios'

在这里插入图片描述

5.后端项目（后面学习）

说明：


    前端请求路径：
        http://localhost:8080/student/updateStu 修改
        http://localhost:8080/student/deleteStu 删除
        ......
    一个Servlet实现同一模块的多个功能：
        1.虚拟路径目录匹配  /student/*
        2.接收到请求之后，获取请求路径最后一段内容，比如updateStu或者deleteStu
        3.然后去匹配对应的方法并执行

StudentServlet：

package com.lystar.web;

import com.lystar.pojo.po.Student;
import com.lystar.pojo.vo.PageBean;
import com.lystar.pojo.vo.Pagination;
import com.lystar.pojo.vo.Result;
import com.lystar.service.StudentService;
import com.lystar.util.BaseController;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/*
    前端请求路径：
        http://localhost:8080/student/updateStu 修改
        http://localhost:8080/student/deleteStu 删除
        ......
    一个Servlet实现同一模块的多个功能：
        1.虚拟路径目录匹配  /student/*
        2.接收到请求之后，获取请求路径最后一段内容，比如updateStu或者deleteStu
        3.然后去匹配对应的方法并执行
 */
@WebServlet("/student/*")
public class StudentServlet extends HttpServlet {
    private StudentService service = new StudentService();
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设置请求和响应编码
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");

        //1.获取方法名
            //获取请求地址,对请求地址进行切割出最后一个单词(意图)
        String url = request.getRequestURI();
        int lastIndex = url.lastIndexOf('/');
        String method = url.substring(lastIndex + 1,url.length());

        if(method.equals("selectByPage")) {
            //分页查询功能
            selectByPage(request,response);
        }else if(method.equals("addStu")) {
            //添加数据功能
            addStu(request,response);
        } else if(method.equals("updateStu")) {
            //修改数据功能
            updateStu(request,response);
        } else if(method.equals("deleteStu")) {
            //删除数据功能
            deleteStu(request,response);
        }


    }

    /*
        删除数据功能
     */
    private void deleteStu(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        try{
            //1. 获取请求参数
            String number = req.getParameter("number");

            //2. 调用业务层的删除方法
            service.deleteStu(number);

            // 3 响应
            BaseController.printResult(resp, new Result(true, "删除成功!"));
        } catch (RuntimeException e) {
            e.printStackTrace();
            BaseController.printResult(resp, new Result(false, "删除失败! 原因:" + e.getMessage()));
    }
    }

    /*
        修改数据功能
     */
    private void updateStu(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        try{
            //获取请求参数,封装Student对象
            Student stu = BaseController.parseJSON2Object(req, Student.class);

            //调用业务层的添加方法
            service.updateStu(stu);

            BaseController.printResult(resp,new Result(true,"修改成功!"));
        } catch (RuntimeException e) {
            e.printStackTrace();
            BaseController.printResult(resp, new Result(false, "修改失败!"));
        }
    }

    /*
        添加数据功能
     */
    private void addStu(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        try{
            //获取请求参数,封装Student对象
            Student stu = BaseController.parseJSON2Object(req, Student.class);

            //调用业务层的添加方法
            service.addStu(stu);

            BaseController.printResult(resp,new Result(true,"添加成功!"));
        } catch (RuntimeException e) {
            e.printStackTrace();
            BaseController.printResult(resp, new Result(false, "添加失败!"));
        }
    }

    /*
        分页查询功能
     */
    private void selectByPage(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        //获取请求参数
        try{
            Pagination pagination = BaseController.parseJSON2Object(req, Pagination.class);
//            int i =1/0;
            //调用业务层的查询方法
            PageBean page = service.selectByPage(pagination);
//            int i = 1/0;
            //响应给客户端
            BaseController.printResult(resp,new Result(true,"查询成功!",page));
        } catch (RuntimeException e) {
            e.printStackTrace();
            BaseController.printResult(resp, new Result(false, "查询失败!o(╥﹏╥)o"));
        }
    }



}

​

ly_stars
关注
  • 22
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue脚手架搭建以及创建Vue项目流程
weixin_68658847的博客
04-25 3万+
Vue脚手架的创建以及用脚手架创建项目的全套流程
VUE脚手架具体使用方法
10-16
主要介绍了VUE脚手架具体使用方法，vue-cli这个构建工具大大降低了webpack的使用难度，小编觉得不错，下面就一起来了解一下具体使用方法
vue脚手架笔记vue脚手架笔记vue脚手架笔记vue脚手架笔记
12-02
vue脚手架笔记vue脚手架笔记vue脚手架笔记
基于vue脚手架
07-23
基于vue基础，结合element ui，运行的一个脚手架，适合新手学习和项目开发用
Vue脚手架的简单使用实例
10-18
主要介绍了Vue脚手架的简单使用实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue脚手架环境搭建.pdf
11-03
Vue脚手架环境搭建步骤
vue脚手架搭建过程图解
08-27
vue脚手架是个好东西，能够快速搭建vue单页面应用，vue是基于node环境的，所以要先安装node。下面通过图文并茂的形式给大家介绍vue脚手架搭建过程图解，感兴趣的朋友一起看看吧
Vue 脚手架
Errol's Blog
03-30 8496
Vue 脚手架
vue脚手架
TashuoLhy的博客
10-10 2076
vue 脚手架的安装
Vue脚手架项目
nhhtx的博客
12-18 1841
Vue脚手架(Vue CLI)是一个官方提供的命令行工具,用于快速搭建和管理Vue.js项目的开发环境。它提供了一套可配置的脚手架,帮助开发者初始化Vue项目,并集成了开发所需的工具和依赖项,包括构建工具、开发服务器、打包工具等。babel、webpack都集成在其中。这个也是我这段时间学到的，希望对大家有用，有写得不好的地方，也请大家多多见谅！最后，祝大家学习进步，快快乐乐度过每一天！
vue脚手架搭建项目的兼容性配置详解
12-12
使用vue-cli搭建项目，面临着解决ie兼容性问题(ie9+)，因为ie浏览器并不支持es6语法等。 首先安装babel-polyfill，解决ie不支持promise对象的问题 npm install --save-dev babel-polyfill 安装成功之后,在main.js第一行引入 import 'babel-polyfill' 安装引入成功之后，如果项目还不能正常运行 则需要安装babel进行解析 （推荐阮一峰老师的文章https://www.jb51.net/article/141931.htm） 我自己是安装了babel-preset-es2015和babel
VUE脚手架的下载和配置步骤详解
01-19
VUE脚手架下载 1.第一步全局安装脚手架 cnpm i @vue/cli -g 2.第二步创建项目 创建文件夹,打开文件命令窗口 vue create 自己创建的项目名 3. 有两个选项，选择第二个，也就是自己选择配置 4. 选择自己需要的配置...
【Vue脚手架安装教程】
热门推荐
zjyJul的博客
04-27 3万+
文章目录前言一、安装Node.js二、配置淘宝镜像1.将npm设置为淘宝镜像：2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 安装Vue脚手架之前，要先安装node.js配置环境 提示：以下是本篇文章正文内容，下面案例可供参考 一、安装Node.js 1.搜索node.js官网下载自己对应版本 https://nodejs.org/ 2.打开文件双击安装，一直点next。安装目录可以更换成自己的目录，最后点击in....
vue 脚手架搭建
qq_45725851的博客
07-11 4955
vue 脚手架搭建
Vue脚手架安装教程
zwl592100的博客
03-04 2万+
一、安装Node.js及配置环境 1、下载Node.js ①浏览器中输入Node.js进行搜索，找到Node.js官网 ②选择14.17.6版本进行下载 ③下载完之后打开文件进行安装 ④安装Node.js 第一步：点击Next 第二步：勾选I accept… 然后Next 第三步：选择安装目录，No...
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 671
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1110
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
vue中的事件
weixin_43390711的博客
05-16 162
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
vue 脚手架
05-24
Vue.js 提供了一个官方的 CLI（命令行界面），即脚手架，用于快速搭建 Vue.js 项目。脚手架提供了一些默认的配置，例如开发服务器、构建配置等，使得项目的搭建和维护更加容易。 安装 Vue.js 脚手架需要先安装 Node...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值