初学vue3+Elementui 项目实战一

一. 安装

安装@vue/cli

npm install -g @vue/cli

创建项目

vue create 项目名

安装Elementui

进入项目根目录 npm i element-ui -S

vue3上使用elementui需要安装element-plus

npm install element-plus --save

安装Axios,是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中.

进入项目根目录 cnpm i --save axios

其他第三方的引入，如echarts
npm install --save 名@版本号

npm install --save [email protected]

启动项目

npm install //install dependencies
npm run serve
npm run build //build for production with minification
npm run build --report //build for production and view the bundle analyzer report

你可以通过 vue ui 命令使用 GUI 运行更多的特性脚本

二. 项目结构

45956D0E-E899-4682-8684-2886913A342F.png

node_modules 存放包管理工具下载安装的包的文件夹
public 公共资源
src 源文件
. browserslistrc 项目配置工具
.gitignore git配置
babel.config.js 转码器
package.json 项目依赖文件

package.json中：devDependencies中的插件只用于开发环境，dependencies发布到生产环境。

三. 引入

在项目src/main.js中引入依赖
每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的
vue3全局API的变化，一个新的全局-api-createapp

vue3 全局引入,main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementUI)
app.use(store).use(router).mount("#app")

vue2中mian.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
router,
store,
render:h => h(App)
}).$mount('#app')

new Vue({
router: router, //路由
store: store, //store 是vuex的实例化对象
render:h => h(App) //一个方法
}).$mount('#app')

ES5的写法：
render:h => h(App)
render:function(createElement){
return createElement(App)
}

h:render中的行参，createElement缩写

ES6的写法： render: createElement => createElement(App)

mount
在Vue构造函数时，需要配置一个el属性，如果没有没有el属性时，可以使用.$mount(‘#app’)进行挂载。

相当于

new Vue({
el: '#app',
router,
render: h => h(App)
});

也可以先得到Virtual DOM，再挂载

var component = new MyComponent().$mount()

document.getElementById('app').appendChild(component.$el)

vue1.x写法

new Vue({
el: '#app',
components: { App }
});

render
一种渲染函数，它比模板更接近编译器，render 函数的优先级高于根据 template 选项或挂载元素的 DOM 内 HTML 模板编译的渲染函数。
js与node.js

JS是由ES(ECMAScript)、DOM(浏览器文档对象)、BOM(浏览器对象模型)组成。
其中Node.Js就只有ES，目前浏览器比较流行的版本就是ES6(ES2015)，老浏览器的版本基本上都是ES5。所以alert和document不能在Node运行(因为Node没有dom和bom)。

ECMAScript 6.0（以下简称 ES6）
ES6是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ES6既是一个历史名词，也是一个泛指，含义是5.1版以后的JavaScript的下一代标准，涵盖了ES2015、ES2016、ES2017等等，而ES2015则是正式名称，特指该年发布的正式版本的语言标准。

四. 配置文件

自定义 vue.config.js文件放在根目录中，和package.json同级

module.exports ={
devServer:{
port:8080,
host:'localhost',
open:true,//配置浏览器自动访问
}
}

五. 路由

路由在根目录中router文件夹

F418BE30-B2B8-4DF3-860F-CCAD63549FD3.png

路由跳转：

import router from '@/router'
router.push('/home')
或者：
this.$router.push('/home')

router为Router的实例，相当于一个全局的路由器对象，进行路由跳转；route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等。

获取路由信息

created(){
console.log(this.$route)
},

监听路由变化：

watch:{ //监听
$route(to,from){
console.log(to,from)
}
},

多级路由

截屏2021-11-29 上午10.33.06.png

当一进到首页，需要展示的是真正首页的信息，所以：home的redirect:'/index'

截屏2021-11-29 上午10.34.39.png

路由拦截：访问路由时需要进行校验，校验通过就访问该路由，否则到另一界面

截屏2021-11-29 下午3.14.07.png

六. 组件的封装与复用

简单的代码分块
新建Nav.vue 把已经写好的导航代码移到Nav.vue，并在原文件中导入：

import Nav from './Nav.vue'
export default {
components:{
Nav
}
}
在需要插入组件的代码处：

组件的封装,传值
props:父传子的参数
2.1 把导航分成Nav.vue

截屏2021-11-29 上午10.43.04.png

刷新界面还能保持选中状态：exact精确匹配

路由的引入：router

2.2 根据组件名name进行递NavItem.vue

截屏2021-11-29 上午10.45.05.png

2.3 在需要显示路由界面内容的地方：

截屏2021-11-29 上午10.51.13.png

别忘了在需要子级路由的父界面处也插入，比如个人中心下面有卖家操作台子级，需要在个人中心加