一. 安装
- 安装@vue/cli
npm install -g @vue/cli
- 创建项目
vue create 项目名
进入项目根目录 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 echarts@4.9.0
- 启动项目
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 运行更多的特性脚本
二. 项目结构
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 下午3.14.07.png
六. 组件的封装与复用
- 简单的代码分块
新建Nav.vue 把已经写好的导航代码移到Nav.vue，并在原文件中导入：
import Nav from './Nav.vue'
export default {
components:{
Nav
}
}
在需要插入组件的代码处：<Nav/>
-
组件的封装,传值
props:父传子的参数
2.1 把导航分成Nav.vue
截屏2021-11-29 上午10.43.04.png
刷新界面还能保持选中状态：exact精确匹配
<el-menu :default-active="$route.path" exact
路由的引入：router
<el-menu :default-active="$route.path" exact mode="horizontal" @select="handleSelect" router>
2.2 根据组件名name进行递NavItem.vue
2.3 在需要显示路由界面内容的地方：<router-view/>
别忘了在需要子级路由的父界面处也插入<router-view/>，比如个人中心下面有卖家操作台子级，需要在个人中心加<router-view/>
