哪里有网站建设定制,谷秋精品课程网站建设软件,wordpress更改布局,个人链接怎么制作#x1f497;wei_shuo的个人主页 #x1f4ab;wei_shuo的学习社区 #x1f310;Hello World #xff01; Vue.js概述 Vue 是一套用于构建用户界面的渐进式JavaScript框架。 与其它大型框架不同的是#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层… wei_shuo的个人主页 wei_shuo的学习社区 Hello World Vue.js概述 Vue 是一套用于构建用户界面的渐进式JavaScript框架。 与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时Vue 也完全能够为复杂的单页应用SPA提供驱动 MVVM模型 Model模型层表示JavaScript对象View视图层表示DOM(HTML操作的元素)ViewModel连接视图层和数据的中间件Vue.js就是MVVM中的ViewModel层的实现者 MVVM模型的特点 低耦合视图(View)可以独立Model变化和修改一个ViewModel可以绑定到不同的View上当View变化的时候Model可以不变当Model变化的时候View也可以不变可复用可以将视图逻辑放在ViewModel中让更多View重用这段视图逻辑独立开发开发人员可以专注于业务逻辑和数据开发(ViewModel)设计人员可以专注于页面设计可测试测试可以针对ViewModel编写 Hello Vue
!doctype html
html langen
headmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript src../sources/vue.js/script
/head
body!--view层 模板--
div idapph1{{message}}/h1
/divscriptvar vm new Vue({el: #app, //绑定元素//Model数据data:{message:HelloVue!}});
/script
/body
/html缩写 v-bind v-on v-bind缩写 !-- 完整语法 --
a v-bind:hrefurl.../a!-- 缩写 --
a :hrefurl.../a!-- 动态参数的缩写 (2.6.0) --
a :[key]url ... /av-on缩写 !-- 完整语法 --
a v-on:clickdoSomething.../a!-- 缩写 --
a clickdoSomething.../a!-- 动态参数的缩写 (2.6.0) --
a [event]doSomething ... /a总结 它们看起来可能与普通的 HTML 略有不同但 : 与 对于 attribute 名来说都是合法字符在所有支持 Vue 的浏览器都能被正确地解析。而且它们不会出现在最终渲染的标记中 Vue的7个属性 el属性 指示vue编译器从什么地方开始解析 vue的语法 data属性 组织从view中抽象出来的属性可以说将视图的数据抽象出来存放在data中 methods属性 放置页面中的业务逻辑js方法一般都放置在methods中 template属性 设置模板会替换页面元素 computed属性 用来计算根据已经存在的属性计算出新的属性对于同样的数据会缓存 render属性 创建真正的Virtual Dom watch属性 监听data中数据的变化 双向数据绑定 双向数据绑定是指视图 View 的变化能实时地让数据模型 Model 发生变化而数据的变化也能实时更新到视图层 输入框双向数据绑定 !--view层 模板--
div idapp输入的文本:input typetext v-modelmessage{{message}}
/divscriptvar vm new Vue({el: #app, //绑定元素//Model数据data:{message:同步更新}});
/script单选框双向数据绑定 !--view层 模板--
div idapp性别input typeradio namesex value男 v-modelwei_shuo 男input typeradio namesex value女 v-modelwei_shuo 女p选中了谁{{wei_shuo}}/p
/divscriptvar vm new Vue({el: #app, //绑定元素//Model数据data:{wei_shuo:}});
/script下拉框双向数据绑定 !--view层 模板--
div idapp下拉框select v-modelselectedoption---请选择---/optionoption valueAA/optionoption valueBB/optionoption valueCC/optionoption valueDD/option/select
/divscriptvar vm new Vue({el: #app, //绑定元素//Model数据data:{selected:---请选择---}});
/script组件 组件可以扩展 HTML 元素封装可重用的代码组件系统让我们可以用独立可复用的小组件来构建大型应用几乎任意类型的应用的界面都可以抽象为一个组件树 格式 Vue.component(my-component-name, { /* ... */ })该组件名就是 Vue.component 的第一个参数 !--view层 模板--
div idapp!--组件传递给组件中的值只能通过props参数接受--wei_shuo v-foritem in items v-bind:weiitem/wei_shuo/divscript!--定义一个Vue组件component--Vue.component(wei_shuo, {//接受参数props:[wei],//模板template: li{{wei}}/li});var vm new Vue({el: #app, //绑定元素//Model数据data: {items: [Java,Linux,前端,后端]}});
/scriptAxios异步通讯 Axios是一个开源的可以用在浏览器和NodeJS的异步通讯框架主要作用是实现AJAX异步通讯 特点 浏览器创建XMLHttpRequests从node.js创建http请求支持Promise APIJS中链式编程拦截请求和响应转换请求数据和响应数据取消请求自动转换JSON数据客户端支持防御XSRF跨站请求伪造 背景 Vue.js是一个视图层框架作者尤雨溪严格准守SoC关注度分离原则所以Vue.js并不包含AJAX的通讯功能为了解决通信问题作者单独开发了名为vue-resource的插件2.0版本以后停止了对该插件的维护并推荐了Axios框架 Vue声明周期 Vue实例有完整的声明周期开始创建、编译模板、挂载DOM、渲染-更新-渲染、卸载等一系列操作也就是Vue实例从创建到销毁的过程称为Vue的声明周期 声明周期钩子函数 创建前beforeCreate Vue实例开始初始化时调用 创建后created 实例创建之后进行调用此时尚未开始DOM编译 载入前beforeMount 依然得不到具体的DOM元素但vue挂载的根节点已经创建 载入后mounted 在DOM文档渲染完毕之后进行调用 更新前beforeUpdate data更新时触发 更新后updated data更新时触发 销毁前beforeDestroy 销毁实例前进行调用此时实例任然有效 销毁后destroyed 实例被销毁之后进行调用 创建data.json文件 {name: wei_shuo,url: http://baidu.com,page: 1,isNonProfit: true,address: {street: 陕西,city: 西安,country: 中国},links: [{name: B站,url: https://www.bilibili.com/},{name: 4399,url: https://www.4399.com/},{name: 百度,url: https://www.baidu.com/}]
}引入vue.js和axios.js script src../sources/vue.js/script
script srchttps://unpkg.com/axios/dist/axios.min.js/scriptVue.html文件 !doctype html
html langen
headmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript src../sources/vue.js/scriptscript srchttps://unpkg.com/axios/dist/axios.min.js/script!-- v-cloak 解决闪烁问题 --style[v-clock]{display: none;}/style
/head
body
div idapp v-clockdiv{{info.name}}/divdiv{{info.address.street}}/diva v-bind:hrefinfo.url点击/a
/divscriptvar vm new Vue({el: #app,data() {return {//请求的返回参数必须和json字符串一致info:{name:null,address:{street:null,city:null,contry:null},url:null}}},mounted() { //钩子函数 链式编程axios.get(../data.json).then(response (this.info response.data));}})
/script
/body
/html
/*
浏览器显示结果
wei_shuo
陕西
点击
*/内容分发Slot插槽 Vue.js中使用元素作为承载分发内容的出口作者称为插槽可以应用在组合组件的场景中 !doctype html
html langen
headmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript src../sources/vue.js/script
/head
body
div idapptodotodo-title slottodo-title v-bind:titletitle1/todo-titletodo-items slottodo-items v-foritem1 in todoItems :itemitem1/todo-items/todo
/div
script!--定义插槽--Vue.component(todo, {template:div slot nametodo-title/slot ul slot nametodo-items/slot /ul /div});Vue.component(todo-title,{props:[title],template: div{{title}}/div});Vue.component(todo-items,{props: [item],template: li{{item}}/li});var vm new Vue({el: #app,data:{title1:wei_shou列表,todoItems:[学习Java,学习Linux,学习Vue]}})
/script
/body
/html自定义事件$emit 自定义事件分发 格式: this.$emit(自定义事件名,参数)
this.$emit(remove, index);!doctype html
html langen
headmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript src../sources/vue.js/script
/head
body
div idapptodotodo-title slottodo-title v-bind:titletitle1/todo-titletodo-items slottodo-items v-for(item1,index) in todoItems :itemitem1 v-bind:indexindexv-on:removeremoveItems(index) v-bind:keyindex/todo-items/todo
/div
script!--定义插槽--Vue.component(todo, {template:div slot nametodo-title/slot ul slot nametodo-items/slot /ul /div});Vue.component(todo-title, {props: [title],template: div{{title}}/div});Vue.component(todo-items, {props: [item, index],//只能绑定当前组件的方法template: li{{index}}---{{item}}button clickremove删除/button/li,methods: {remove: function (index) {//自定义事件分发//this.$emit(自定义事件名,参数)this.$emit(remove, index)}}});var vm new Vue({el: #app,data: {title1: wei_shou列表,todoItems: [学习Java, 学习Linux, 学习Vue],removeItems: function (index) {console.log(删除 this.todoItems[index] OK)this.todoItems.splice(index, 1); //一次删除一个元素}}})
/script
/body
/htmlvue-cli项目 vue-cli是官方提供的一个脚手架用于快速生成一个vue的项目模板预先定义的目录结构及基础代码使开发更加快速 功能 统一项目结构本地调试热部署单元测试集成打包上线 创建Vue项目新建目录cmd目录窗进入创建的目录路径运行vue init webpack myvue命令初始化 等待5分钟左右即可初始化完成 项目名称 ? Project name (myvue) 项目描述 ? Project description (A Vue.js project) 作者 ? Author 构建(选择第一个即可运行时编译) ? Vue build (Use arrow keys) vue路由以下n即是手动创建y即是自动创建 ? Install vue-router? (Y/n) ? Use ESLint to lint your code?(Y/n) ? Set up unit tests (Y/n) ? Setup e2e tests with Nightwatch? (Y/n) No即不会自动npm installyes就会自动npm install ? Should we run npm install for you after the project has been created? (recommended) (Use arrow keys) Yes, use NPM Yes, use Yarn No, I will handle that myself D:\Java\Vue-clivue init webpack myvue
? Project name (myvue)
? Project description (A Vue.js project)
? Author
? Vue build (Use arrow keys)Runtime Compiler: recommended for most usersRuntime-only: about 6KB lighter mingzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - re
nder functions are required elsewhere
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)Yes, use NPMYes, use YarnNo, I will handle that myself目录路径即会产生myvue目录 初始化运行 cd myvue npm install npm run dev cmd窗口进入myvue路径 执行npm install命令 如果中途报错安装命令窗口提示执行提示命令即可修复 执行npm run dev 启动当前项目 cmd上面的cmd窗口别关闭直接访问http://localhost:8080会出现如下页面 IDEA搭建vue-cli项目 直接用IDEA——OPEN——myvue目录即可 Webpack学习 webpack 是代码编译工具有入口、出口、loader 和插件。webpack 是一个用于现代JavaScript应用程序的静态模块打包工具当 webpack 处理应用程序时它会在内部构建一个依赖图(dependency graph)此依赖图对应映射到项目所需的每个模块并生成一个或多个 bundle。 安装Webpack npm install webpack -gnpm install webpack-cli -g 测试安装成功 webpack -vwebpack-cli -v 配置 创建webpack.config.js配置文件 entry入口文件指定webpack用哪个文件作为项目入口output输出指定webpack把处理完成的文件放置到指定路径module模板用于处理各类类型的文件plugins插件如热更新、代码重用……resolve设置路径指向watch监听用于设置文件改动后直接打包 webpack使用 创建项目创建名为modules的目录用于放置JS模板等资源文件modules下创建模板文件用于编写JS模板相关代码hello.js //暴露一个方法
exports.sayHi function () {document.write(h1wei_shuo/h1)
}modules下创建入口文件用于打包时设置entry属性main.js var hello require(./hello);
hello.sayHi();项目目录下创建配置文件webpack.config.js module.exports {entry: ./modules/main.js,output: {filename: ./js/bundle.js}
};在IDEA终端使用webpack命令打包bundle.js ((){var r{645:(r,t){t.sayHifunction(){document.write(h1wei_shuo/h1)}}},t{};(function e(o){var it[o];if(void 0!i)return i.exports;var nt[o]{exports:{}};return r[o](n,n.exports,e),n.exports})(645).sayHi()})();项目目录下创建HTML页面导入webpack打包后的JS文件index.html !doctype html
html langen
headmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title
/head
body!--前端的模块化开发--
script srcdist/js/bundle.js/script
/body
/html说明 参数 --watch 用于监听变化 webpack --watch vue-router路由 Vue Router 是 Vue.js的官方路由。它与 Vue.js 核心深度集成让用 Vue.js 构建单页应用变得轻而易举 功能vue-router官方 嵌套路由映射动态路由选择模块化、基于组件的路由配置路由参数、查询、通配符展示由 Vue.js 的过渡系统提供的过渡效果细致的导航控制自动激活 CSS 类的链接HTML5 history 模式或 hash 模式可定制的滚动行为URL 的正确编码 安装vue-router 基于第一个vue-cli进行测试学习查看node_modules中是否存在vue-routervue-router是一个插件包所以需要用npmcnpm进行安装 打开IDEA终端输入命令安装vue-router npm install vue-router --save-dev因为依赖关系报错则使用如下安装命令 npm install --legacy-peer-deps vue-router --save-dev如果报错信息显示run npm audit fixto fix themor npm audit for details根据信息执行提示命令即可 npm audit fix
npm audit在项目main.js中导入并使用 //导入安装的vue-router组件
import VueRouter from vue-router//显示声明使用VueRouter
Vue.use(VueRouter);测试 IDEA终端运行项目 npm run dev如果出现报错 export default (imported as VueRouter) was not found in vue-router两种原因 路由格式编写错误 路由格式 routes: [{// 路径path: /home,// 组件名component: Home
}];对应版本不兼容 安装的时候默认安装最新版本可能与其他插件不兼容推荐使用稳定版本vue-router3.5.2 卸载npm uninstall vue-router下载降级npm install vue-router3.5.2 --save-dev // xxx 自己指定版本再次运行项目npm run dev main.js 代码 import Vue from vue
import App from ./App//导入安装的vue-router组件
import VueRouter from vue-router//显示声明使用VueRouter
Vue.use(VueRouter);Vue.config.productionTip falsenew Vue({el: #app,components: { App },template: App/
})App.vue代码 templatediv idapph1欢迎wei_shuo/h1/div
/templatescript
export default {name: App
}
/scriptstyle
#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;
}
/stylevue-router使用
创建公共组件目录components 目录components下创建vue组件 Content.vue !--页面编写--
templateh1内容页面/h1
/template!--vue对象--
script
export default {name: Content
}/script!--scoped作用域添加scoped只在当前页面生效--
style scoped/styleMain.vue templateh1首页/h1
/templatescript
export default {name: Main
}
/scriptstyle scoped/style创建存放路由的文件夹router 目录router创建router路由 index.js //导入vue和vue-router组件
import Vue from vue;
import VueRouter from vue-router;
import Content from ../components/Content;
import Main from ../components/Main;
//安装路由
Vue.use(VueRouter);//配置导出路由
export default new VueRouter({routes:[{//路由路径path:/content,name:content,//跳转组件component:Content},{//路由路径path:/main,name:content,//跳转组件component:Main}]
});配置路由 在main.js中配置路由 import Vue from vue
import App from ./App//导入配置路由文件
import router from ./router //自动扫描里面的路由配置Vue.config.productionTip falsenew Vue({el: #app,//配置路由router,components: { App },template: App/
})使用路由 在App.vue中使用路由 templatediv idapph1欢迎wei_shuo/h1!--跳转连接--router-link to/main首页/router-linkrouter-link to/content内容页面/router-link!--展示视图--router-view/router-view/div
/templatescript
export default {name: App,
}
/scriptstyle
#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;
}
/stylevue-router使用流程 components目录下创建vue组件wei.vue templateh1wei/h1
/templatescript
export default {name: wei
}
/scriptstyle scoped/style目录router创建router路由index.js //导入vue和vue-router组件
import Vue from vue;
import VueRouter from vue-router;//导入components目录中vue组件
import wei from ../components/wei//安装路由
Vue.use(VueRouter);//配置导出路由
export default new VueRouter({routes:[{//路由路径path:/wei,//name 可省略name:content,//跳转组件component:wei}]
});在main.js中配置路由 templatediv idapph1欢迎wei_shuo/h1!--跳转连接--router-link to/weiwei/router-link!--展示视图--router-view/router-view/div
/templatescript
export default {name: App,
}
/scriptstyle
#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在App.vue中使用、导入配置路由 import Vue from vue
import App from ./App//导入配置路由文件
import router from ./router //自动扫描里面的路由配置Vue.config.productionTip falsenew Vue({el: #app,//配置路由router,components: { App },template: App/
})结果测试 网页点击首页 点击内容页面 点击wei Axios Axios 是一个基于 promise异步编程的一种解决方案网络请求库作用于node.js和浏览器中 它是 isomorphic即同一套代码可以运行在浏览器和node.js中服务端它使用原生 node.js http 模块,而在客户端 浏览端则使用 XMLHttpRequests 异步编程异步编程是让程序并发运行的一种手段 功能Axios中文网 从浏览器创建 XMLHttpRequests从 node.js 创建http请求支持Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防御XSRF 安装
$ npm install axiosVueElementUI Element一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element官网 创建工程 创建hello-vue工程 vue init webpack hello-vue安装依赖需要安装vue-router、element-ui、sass-loader、node-sass四个插件 # 进入工程目录
cd hello-vue
# 安装 vue-router
npm install vue-router --save-dev
# 安装 element-ui
npm i element-ui -S
# 安装依赖
npm install
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev安装 vue-router过程中如果报错依赖错误则绕过依赖安装 npm install vue-router --save-dev --legacy-peer-deps安装element-ui报错依赖过程中如果报错依赖错误则绕过依赖安装 npm i element-ui -S --save-dev --legacy-peer-deps安装依赖过程中如果报错依赖错误则绕过依赖安装 npm install --save-dev --legacy-peer-deps安装 SASS 加载器WARNING是警告可以忽略 cnpm install sass-loader node-sass --save-dev启动测试 npm run dev使用IDEA打开hello-vue项目 项目搭建 创建页面目录views和前端路由目录routers 页面目录views下创建 Main.vue首页 templateh1首页/h1
/templatescript
export default {name: Main
}
/scriptstyle scoped/styleLogin.vue登录页面 templatedivel-form refloginForm :modelform :rulesrules label-width80px classlogin-boxh3 classlogin-title欢迎登录/h3el-form-item label账号 propusernameel-input typetext placeholder请输入账号 v-modelform.username//el-form-itemel-form-item label密码 proppasswordel-input typepassword placeholder请输入密码 v-modelform.password//el-form-itemel-form-itemel-button typeprimary v-on:clickonSubmit(loginForm)登录/el-button/el-form-item/el-formel-dialogtitle温馨提示:visible.syncdialogVisiblewidth30%:before-closehandleClosespan请输入账号和密码/spanspan slotfooter classdialog-footerel-button typeprimary clickdialogVisible false确 定/el-button/span/el-dialog/div
/templatescript
export default {name: Login,data() {return {form: {username: ,password: },// 表单验证需要在 el-form-item 元素中增加 prop 属性rules: {username: [{required: true, message: 账号不可为空, trigger: blur}],password: [{required: true, message: 密码不可为空, trigger: blur}]},// 对话框显示和隐藏dialogVisible: false}},methods: {onSubmit(formName) {// 为表单绑定验证功能this.$refs[formName].validate((valid) {if (valid) {// 使用 vue-router 路由到指定页面该方式称之为编程式导航this.$router.push(/main);} else {this.dialogVisible true;return false;}});}}
}
/scriptstyle langscss scoped
.login-box {border: 1px solid #DCDFE6;width: 350px;margin: 180px auto;padding: 35px 35px 15px 35px;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;box-shadow: 0 0 25px #909399;
}.login-title {text-align: center;margin: 0 auto 40px auto;color: #303133;
}
/style前端路由目录routers下创建index.js //导入vue和vue-router组件
import Vue from vue;
import Router from vue-router//添加路由组件
import Main from ../views/Main;
import Login from ../views/Login;//使用vue-router组件
Vue.use(Router)//导出默认接口路由
export default new Router({routes:[{//路由路径path:/main,//跳转组件component:Main},{//路由路径path:/login,//跳转组件component:Login}]
});main.js入口js文件 import Vue from vue
import App from ./App//导入配置路由文件自动扫描里面的路由配置
import router from ./routers//导入ElementUI
import Element from element-ui
//导入ElementUI的CSS
import element-ui/lib/theme-chalk/index.css;//安装路由
Vue.use(router);
//安装ElementUI
Vue.use(Element)Vue.config.productionTip falsenew Vue({el: #app,//路由router,//ElementUIrender: h h(App)
})App.vue根组件 templatediv idapprouter-view/router-view/div
/templatescriptexport default {name: App
}
/scriptIDEA终端运行 npm run dev排错分析
排错一 运行项目报错this.getOptions is not a function说明sass-loader版本太高 npm run devpackage.json文件中降低sass-loader版本 更改完sass-loader版本然后在终端使用npm install命令如果报错依赖无法解析如下 则执行命令如下所示则成功 npm install --legacy-peer-deps排错二 Module build failed: Error: Node Sass version 8.0.0 is incompatible with ^4.0.0.错误来自sass-loader因为node-sass latest为v8.0.0而sass-loader期望值为^ 4.0.0卸载5.0 重装系统提示需求版本即可4.0.0的就可以了 // 卸载node-sass
npm uninstall node-sass --legacy-peer-deps// 然后安装需求版本
cnpm install node-sass4.14.1 --legacy-peer-deps排错三 Module build failed: Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (93)查看本机安装的node版本安装对应的node-sass版本 部分对应版本 node版本v14.18.3
node-sass版本4.7.2
sass-loader版本7.3.1node版本16.13.1
node-sass版本6.0.1
sass-loader版本10.0.1查看自己的node版本我的是node16所以应安装node-sass 6.0版本 D:\Java\Vue-cli\hello-vuenode -v
v16.18.0安装node-sass 6.0版本6.0.1 package.json调整版本 sass-loader: ^6.0.1终端执行命令更新依赖项 npm install --legacy-peer-deps安装对应版本的node-sass cnpm install node-sass6.0.1 --legacy-peer-deps排错四 export default (imported as Router) was not found in vue-router原因一路由格式编写错误 routes: [{// 路径path: /home,// 组件名component: Home
}];原因二下载或者卸载已有版本 卸载npm uninstall vue-router下载降级npm install vue-router3.5.2 --save-dev // xxx 自己指定版本降级之后需要使用命令更新依赖 npm install --legacy-peer-deps排错总结 版本问题更改package.json版本后需要执行更新依赖的命令 npm install --legacy-peer-deps系统提示执行命令可以直接执行即可错误多半是版本兼容错误调整对应版本即可如果是依赖错误的话需要在命令后加上 --legacy-peer-deps运行项目 运行项目 npm run devvue项目目录分析 build构建脚本目录 config项目配置 node_modulesnpm加载项目的依赖模块 src源码目录 main.js——入口js文件App.vue——根组件components——共组件目录assets——资源目录这里的资源会被wabpack构建routes——前端路由store——应用级数据stateviews——页面目录 static静态资源目录不会被webpack构建 package.jsonnpm包配置文件定义项目的npm脚本、依赖包等信息 README.md项目的说明文档markdown格式 npm命令解析 安装模块到项目下 npm install moduleName-g模块安装到全局 npm install -g moduleName–save模块安装到项目下并在package文件的devDependencies结点写入依赖-S 为缩写 npm install --save moduleName–save-dev将模块安装到项目目录下并且在package文件devDependencies结点写入依赖-D为缩写 npm install --save-dev moduleName路由嵌套 嵌套路由子路由实际应用中通常由多层嵌套的组件组合而成同样的URL中各段动态路径也按某种结构对应嵌套的各层组件 /user/johnny/profile /user/johnny/posts
------------------ -----------------
| User | | User |
| -------------- | | ------------- |
| | Profile | | ------------ | | Posts | |
| | | | | | | |
| -------------- | | ------------- |
------------------ -----------------项目结构 创建页面目录views和前端路由目录routers 页面目录views下创建user目录 main.vue首页 templatedivel-containerel-aside width200pxel-menu :default-openeds[1]el-submenu index1template slottitlei classel-icon-caret-right/i用户管理/templateel-menu-item-groupel-menu-item index1-1!--插入的地方--router-link to/user/profile个人信息/router-link/el-menu-itemel-menu-item index1-2!--插入的地方--router-link to/user/list用户列表/router-link/el-menu-item/el-menu-item-group/el-submenuel-submenu index2template slottitlei classel-icon-caret-right/i内容管理/templateel-menu-item-groupel-menu-item index2-1分类管理/el-menu-itemel-menu-item index2-2内容列表/el-menu-item/el-menu-item-group/el-submenuel-submenu index3template slottitlei classel-icon-caret-right/i系统管理/templateel-menu-item-groupel-menu-item index3-1系统信息/el-menu-itemel-menu-item index3-2系统内容/el-menu-item/el-menu-item-group/el-submenu/el-menu/el-asideel-containerel-header styletext-align: right; font-size: 12pxel-dropdowni classel-icon-setting stylemargin-right: 15px/iel-dropdown-menu slotdropdownel-dropdown-item个人信息/el-dropdown-itemel-dropdown-item退出登录/el-dropdown-item/el-dropdown-menu/el-dropdown/el-headerel-main!--在这里展示视图--router-view//el-main/el-container/el-container/div
/template
script
export default {name: Main
}
/script
style scoped langscss
.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;
}.el-aside {color: #333;
}
/styleProFile.vue个人信息 templateh1个人信息/h1
/templatescript
export default {name: UserProFile
}
/scriptstyle scoped/style List.vue用户列表 templateh1用户列表/h1
/templatescript
export default {name: UserList
}
/scriptstyle scoped/style前端路由目录routers下创建index.js //导入vue和vue-router组件
import Vue from vue;
import Router from vue-router//添加路由组件
import Main from ../views/Main
import Login from ../views/Loginimport UserList from ../views/user/List
import UserProFile from ../views/user/ProFile//使用vue-router组件
Vue.use(Router)//导出默认接口路由
export default new Router({routes: [{//路由路径path: /main,//跳转组件component: Main,//嵌套路由children: [{path: /user/profile, component: UserProFile},{path: /user/list, component: UserList}]},{//路由路径path: /login,//跳转组件component: Login}]
});main.js入口js文件 import Vue from vue
import App from ./App//导入配置路由文件自动扫描里面的路由配置
import router from ./routers//导入ElementUI
import Element from element-ui
//导入ElementUI的CSS
import element-ui/lib/theme-chalk/index.css;//安装路由
Vue.use(router);
//安装ElementUI
Vue.use(Element)Vue.config.productionTip falsenew Vue({el: #app,//路由router,//ElementUIrender: h h(App)
})App.vue根组件 templatediv idapprouter-view/router-view/div
/templatescriptexport default {name: App
}
/scriptIDEA终端运行 路由模式 hash带路径#符号如http://localhost/#/loginhistory路径不带#符号如http://localhost/login export default new Router({mode:history,routes: []
});参数传递重定向
参数传递 Main.vue !--插入的地方 name传递组件名 params:传递参数--
router-link v-bind:to{name:UserProFile,params:{id:1}}个人信息/router-linkProFile.vue templatedivh1个人信息/h1!--{{ 方式一$route.params.id }}--{{id}}/div
/templatescript
export default {//方式二 props:[id],name: UserProFile
}
/scriptstyle scoped/style重定向
//导出默认接口路由
export default new Router({mode:history,routes: [//重定向{path:/goHome,redirect:/main //重定向路径}]
});404页面 views页面目录创建404页面NotFound.vue templatedivh1404你的页面走丢了/h1/div
/templatescript
export default {name: NotFound
}
/scriptstyle scoped/styleindex.js配置 import NotFound from ../views/NotFound//导出默认接口路由
export default new Router({mode:history,routes: [{path:/*,component:NotFound}]
});路由钩子异步请求
路由钩子 beforeRouteEnter在进入路由前执行 beforeRouteLeave在离开路由前执行 to路由将要跳转的路径信息from路径跳转前的路径信息next路由的控制参数 next() 跳入下一个页面next(‘/path’) 改变路由的跳转方向使其跳到另一个路由next(false) 返回原来页面next((vm){}) 仅在beforeRouteEnter中使用vm是组件实例 script
export default {//进入路由之前执行beforeRouteEnter:(to,from,next){console.log(STARE);next();},//进入路由之后执行beforeRouteLeave:(to,from,next){console.log(END);next();}
}
/script异步请求 安装Axios和vue-axios cnpm install axios -s
cnpm install --save vue-axios安装Axiosmain.js中导入Axios组件 //导入Axios
import axios from axios
import VueAxios from vue-axios//安装axios和VueAxios
Vue.use(VueAxios, axios)Vue工程化项目目录结构 node_modules 通过npm install命令安装的软件包存放的目录非全局安装 dist 项目打包发布目录 public 最后打包时该目录中的文件会直接复制到dist目录中 public/index.html 首页入口文件public/favicon.ico 图标文件 src src/assets 静态资源文件目录 src/components 组件文件目录 src/router 路由插件目录 src/router/index.js 路由插件配置文件 src/store 状态管理插件目录 src/store/index.js 状态管理插件配置文件 src/plugins 插件目录一般存放axios.js插件文件 src/views 组件文件目录仅仅具有模板和样式没有js程序 src/App.vue 应用组件 src/main.js 程序逻辑入口文件 package.json 包管理配置文件记录项目需要的各种软件包信息 package-lock.json 包版本锁定配置文件 vue.config.js vue项目配置文件 结语创作不易如果觉得博主的文章赏心悦目还请——点赞收藏⭐️评论冲冲冲
