来自拉钩教育-Java就业集训营

1.Vue-cli

1.1 什么是Vue-cli

Vue cli是基于Vue的应用开发提供的一个标准的脚手架工具.为应用搭建基础的框架结构,提供插件、开发服务、Preset、构建打包功能
Vue cli 背后集成了现代化开发的诸多功能,通过简单的命令就可以完成 "零配置"的项目环境搭建

1.2 安装Vue-cli步骤

在安装vue-cli前，要确认自己的电脑是否安装了nodejs和npm.

1.2.1 安装Node.js

安装了node.js才有使用npm ，才能安装vue-cli

1.2.1.1 什么是node.js

image.png

1.2.1.2 安装node.js

下载对应你系统的Node.js版本:
https://nodejs.org/en/download
我们统一安装: node-v12.18.1-x64.msi
选安装目录进行安装, 我选择安装在了E盘: E:\Program Files\nodejs
测试: 在命令提示符下输入命令
node -v //会显示当前node的版本

1.2.2 安装NPM

npm全称Node Package Manager，他是node包管理和分发的工具，使用NPM可以对应用的依赖进行管理，NPM 的功能和服务端项目构建工具maven的依赖管理功能差不多，我们通过npm 可以很方便地下载js库，打包js文件。

1.2.2.1 自动安装NPM

node.js已经集成了npm工具
在命令提示符输入 npm -v 可查看当前npm版本
npm -v

image.png

1.2.2.2 查看包管理路径

包路径就是npm从远程下载的js包所存放的路径。使用 npm config ls 查询NPM管理包路径（NPM
下载的依赖包所存放的路径）
npm config ls

我们发现NPM默认的管理包路径在:
C:\Users\86187\AppData\Roaming\npm

1.2.2.3 设置包管理路径

依赖包放在C盘不太合适,为了方便对依赖包管理, 我们将管理包的路径设置在单独的地方:

我们选择一个路径,专门存放这些依赖包.我选择创建一个目录: H:\software\nodejs_package
在 H:\software\nodejs_package 下再创建 npm_modules 文件夹和 npm_cache 文件夹:

image.png
执行下边的命令,设置为自定义的包管理路径：
npm config set prefix "H:\software\nodejs_package\npm_modules"
npm config set cache "H:\software\nodejs_package\npm_cache"
此时再使用 npm config ls 查询NPM管理包路径发现路径已更改

image.png

1.2.2.4 NPM环境变量配置

查看npm的全局路径是什么
npm config get prefix

image.png
配置PATH环境变量

添加新的系统变量: key=NODE_HOME , value= H:\software\nodejs_package
path中添加 %NODE_HOME%\npm_modules

1.2.2.5 安装cnpm

npm默认会去国外的镜像去下载js包，在开发中通常我们使用国内镜像，这里我们使用淘宝镜像
下边我们来安装cnpm：有时我们使用npm下载资源会很慢，所以我们可以安装一个cnmp(淘宝镜像)来
加快下载速度。

联网情况下, 输入命令，进行全局安装淘宝镜像:

//安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
//查看cnpm的版本
cnpm -v

1.2.3 安装vue-cli

目前主流版本是 2.x 和 3.x 版本,安装3.x 以上的版本是因为该版本既可以创建2.x项目与3.x 项目
注意: 以管理员身份打开命令行

安装命令
npm install -g @vue/cli
输入 vue命令

image.png
输入 vue -V 查看版本
vue -V

image.png

1.3 快速构建Vue项目

1.3.1 步骤说明

我们使用vue-cli 快速构建项目,步骤如下:

桌面创建一个空的文件夹 vueTest
以管理员身份运行cmd , 进入到vueTest文件夹

image.png
执行下面的命令

1.基于交互式命令方式,创建项目
//文件名 不支持驼峰（含大写字母）使用短横线方式
vue create my-project

image.png

选择自定义安装,点击回车

02.jpg
在这列表中,选择我们要安装的组件,使用空格键选择,选好后回车

image.png
按回车之后,提示选择什么模式的路由,我们输入 n (表示选择hash模式)

image.png
选择项目配置文件单独存放

image.png
是否保存模板,选择n 不创建

image.png
安装完成,提示输入执行下面这两个命令

image.png
首先进入项目目录
cd my-project
启动项目
npm run serve

image.png
访问项目: http://localhost:8080/

19.jpg

停止项目只要关闭命令行窗口就可以[图片上传中...(19.jpg-ade0a7-1617017776612-0)]

1.3.2 导入Vue项目到VSCode

VSCode中右键选择打开文件夹
选择桌面上的项目
打开项目,可以看到如下项目结构

20.jpg

|--- my-project 项目名称
  |--- node_modules 存放依赖包的目录
  |--- public 静态资源管理目录
  |--- src 组件源码目录(我们写的代码)
    |--- assets 存放静态图片资源(CSS也可以放在这里)
    |--- components 存放各种组件(一个页面可以看做一个组件)，各个组件联系在一起组成一个完整的项目
    |--- router 存放了项目路由文件
    |--- views 放置的为公共组件(主要还是各个主要页面)
    |--- App.vue app.vue可以当做是网站首页，是一个vue项目的主组件，页面入口文件
    |--- main.js 打包运行的入口文件，引入了vue模块和app.vue组件以及路由route
  |--- babel.config.js babel配置文件, 对源代码进行转码(把es6=>es5)
  |--- package.json 项目及工具的依赖配置文件
  |--- paxkage-lock.json 依赖配置文件
  |--- README.md 项目说明

1.3.4 Vue脚手架自定义配置

1.3.4.1 package.js 介绍

每个项目的根目录下面，一般都有一个 package.json 文件，定义了这个项目所需要的各种模
块，以及项目的配置信息（比如名称、版本、许可证等元数据）。 npm install 命令根据这个配置文
件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

{
//1.项目基本信息
"name": "project3",
"version": "0.1.0",
"private": true,
//2.指定运行脚本命令
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
//4.生产环境所依赖模块的版本
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.2.0"
},
//5.本地环境开发所依赖的版本
"devDependencies": {
"@vue/cli-plugin-babel": "~4.4.0",
"@vue/cli-plugin-router": "~4.4.0",
"@vue/cli-service": "~4.4.0",
"vue-template-compiler": "^2.6.11"
}
}

1.3.4.2 通过package.json 配置项目

配置内容采用JSON格式,所有的内容都用双引号包裹
打开package.json,再最末端添加如下配置:

"vue":{
"devServer":{
"port":"8888",
"open":true
}
}

配置说明: 该配置设置打包时服务器相关的信息
port : 访问端口
open true: 打包完成自动打开浏览器

启动项目

在VSCode中选择项目,右键在终端打开

image.png
输入命令
npm rum serve
运行后发现端口号改为 8888,并且在打包完成后自动打开浏览器

注意: 不推荐这种方式,因为package.json 主要是用来管理包的配置信息.为了方便维护,我们将Vue脚手架相关的配置单独定义到 vue.config.js 配置文件中

1.3.4.3 单独的配置文件配置项目

在项目的根目录创建文件 vue.config.js
删除掉package中新添加的配置项.
在vue.config.js 文件中进行相关配置

module.exports = {
devServer:{
open:true
port:8889
}
}

1.3.5 Vue 组件化开发

1. 3.5.1 组件化开发

组件化是Vue的精髓，Vue项目就是由一个一个的组件构成的。我们主要的工作就是开发的组件.

1.3.5.2 组件介绍

我们用 vue-cli 脚手架搭建的项目，里面有很多，如 index.vue 或者 App.vue 这一类的文件.
每一个*.vue 文件都是一个组件，是一个自定义的文件类型, 比如 App.vue 就是整个项目的根组件。

image.png
常见的组件：

页面级别的组件
页面级别的组件，通常是 views 目录下的.vue组件，是组成整个项目的各个主要页面
业务上可复用的基础组件
这一类组件通常是在业务中被各个页面复用的组件，这一类组件通常都写到 components 目
录下，然后通过import在各个页面中使用

组件的组成部分

template : 组件的HTML部分
script: 组件的JS脚本 (使用ES6语法编写)
style: 组件的CSS样式

1.4 项目运行流程

1.4.1 main.js

项目运行会加载入口文件 main.js

/*
html文件中，通过script src = 'xxx'标签引入js文件。
而vue中，通过 import 变量名 from 文件路径 的方式导入文件，不光可以导入js文件。
1.变量名: 指的是为导入的文件起一个名称，不是指导入的文件的名称，相当于变量名。
2.文件路径: 指的是文件的相对路径
*/
import Vue from 'vue'
import App from './App.vue'
import router from './router'
//关闭启动提示
Vue.config.productionTip = false
//创建Vue实例
new Vue({
router, //为整个项目添加路由
render: h => h(App) //这是一个函数ES6语法,作用是生成模板: App = App.vue
}).$mount('#app') //挂载的是App.vue组件中的id为app的区域

1.4.2 App.vue

App.vue 是vue项目的主组件，是页面入口文件，所有页面都是在App.vue下进行切换的

App.vue 中的模板(HTML代码)

1.4.3 router 路由

找到路由文件,来看一下具体的路由配置

// 引入所需文件
import Vue from 'vue' //vue库
import VueRouter from 'vue-router' //vue-router库
import Home from '../views/Home.vue' //首页
//使用路由功能
Vue.use(VueRouter)
//创建路由规则
const routes = [
{path: '/', //路径
name: 'Home', //名称
component: Home //组件 Home.vue
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */
'../views/About.vue')
}
]
//创建路由管理器,管理routes
const router = new VueRouter({
routes
})
//export 用来导出模块 router就代表了整个路由文件
export default router

1.4.4 Home.vue组件

默认访问的是Home.vue 首页

image.png

视图部分

JS部分

HelloWorld.vue 组件页面

1.5 组件的使用案例

1.5.1 创建Header.vue组件

在components 目录下创建 Header.vue

image.png
编写Header.vue



//scoped 表示当前的样式,只作用与当前组件中的 template 视图.

1.5.2 引入 Header组件

修改Home.vue

1.5.3 组件的传参

props : 是组件中的属性, 表示组件可以接受参数,



// scoped 表示当前style的样式只作用于当前组件的template代码中，其他地方不会被影响

2.Element-UI

2.1 Element-UI介绍

element-ui 是饿了么前端出品的基于 Vue.js的后台组件库，方便程序员进行页面快速布局和构建
Element-UI官方站点：
https://element.eleme.cn/#/zh-CN

2.2 Element-UI使用

2.2.1 命令行方式安装

创建一个新的项目
当前项目下打开终端, 安装依赖包 ,执行下面的命令
npm i element-ui -S

image.png
打开 main.js , 导入Element-UI 相关资源

main.js是工程的入口文件，在此文件中加载了很多第三方组件，如：Element-UI、Base64、VueRouter等。

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

image.png

复制Element 按钮样式到app.vue文件的 template下

启动项目 npm run serve, 查看页面

image.png

2.2.2 安装axios

npm安装：使用npm下载axios包
npm i axios
在main.js文件中导入axios 相关资源

//引入axios
import axios from 'axios'
//Vue对象使用axios
Vue.prototype.axios = axios;

Vue-cli&ElementUI

来自拉钩教育-Java就业集训营

1.Vue-cli

1.1 什么是Vue-cli

1.2 安装Vue-cli步骤

1.2.1 安装Node.js

1.2.1.1 什么是node.js

1.2.1.2 安装node.js

1.2.2 安装NPM

1.2.2.1 自动安装NPM

1.2.2.2 查看包管理路径

1.2.2.3 设置包管理路径

1.2.2.4 NPM环境变量配置

1.2.2.5 安装cnpm

1.2.3 安装vue-cli

1.3 快速构建Vue项目

1.3.1 步骤说明

1.3.2 导入Vue项目到VSCode

1.3.4 Vue脚手架自定义配置

1.3.4.1 package.js 介绍

1.3.4.2 通过package.json 配置项目

1.3.4.3 单独的配置文件配置项目

1.3.5 Vue 组件化开发

1. 3.5.1 组件化开发

1.3.5.2 组件介绍

1.4 项目运行流程

1.4.1 main.js

1.4.2 App.vue

1.4.3 router 路由

1.4.4 Home.vue组件

{{ msg }}

Installed CLI Plugins

1.5 组件的使用案例

1.5.1 创建Header.vue组件

1.5.2 引入 Header组件

1.5.3 组件的传参

2.Element-UI

2.1 Element-UI介绍

2.2 Element-UI使用

2.2.1 命令行方式安装

2.2.2 安装axios

你可能感兴趣的:(Vue-cli&ElementUI)