时间:2020年09月10日 | 作者 : aaronyang | 分类 : vue2.X | 浏览: 194次 | 评论 0 人
还是打开上篇的项目
以下内容学习,vue-cli3.x vue2.x版本
在src中
componts: 页面及组件存放路径
app.vue:入口vue页面,相当于index.html存放页面路由入口
man.js:入口js文件,相当于index.js(引入依赖文件需要在这里配置)
vue项目中常用的依赖有vue-router,vuex,axios,以及第三方组件库ant-design。
vue-router:官方的路由管理器。常用的功能有控制页面路由地址及跳转,路由传参及参数查询,有h5的history和hash模式(常用)。
vuex:vuex用来保存需要管理的状态值,值一旦被修改,所有引用该值的地方就会自动更新,用于各组件间的值传递。
axios:用于发起http请求,基于es6的promise,能够拦截请求和响应,转换请求和响应数据,能够自动转换成json数据。
ant-design:是一个第三方的组件库,提供很多封装好的组件以及视觉效果,提高开发效率
如果你拿到的一个vue项目没有依赖包
打开项目,只要他有package.json
打开这个终端,输入
输入npm install
就会下载对应的依赖包
====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========
重新新建项目aystu,因为上个目录是vue3.x预览版的,现在主要流行2.x
选择vue2
cd aystu项目,然后安装
npm install vue-router --save-dev
打开项目的main.js
import Vue from 'vue' import App from './App.vue' import routers from './router' Vue.config.productionTip = false new Vue({ router:routers, render: h => h(App), }).$mount('#app')
新建router文件夹
然后新建index.js
import Vue from 'vue' import router from 'vue-router' import HelloWorld from '../components/HelloWorld.vue' Vue.use(router); const routers = new router({ mode: 'history', routes: [{ name: 'HelloWorld', path: '/helloworld', component: HelloWorld }] }) export default routers;
然后打开App.vue文件
这个相当于模板页,整个页面的全部
原来的代码
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script> <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>
这上面的访问路径在每个页面里面
现在改到统一到 router/index.js
修改代码如下:
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> --> <router-view></router-view> </div> </template> <script> export default { name: 'App', } </script> <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>
OK,接下来运行项目
npm run serve
此时你不必关闭启动的服务,继续修改js,修改html,vue文件,刷新浏览器就可以看到最新的效果
我们打开index.js
修改
然后保存,刷新浏览器
浏览器只有一个appvue上面的那个图了,
因为<router-view 无法找到了
浏览器地址 修改为 http://localhost:8080/helloworld2
又可以正确访问了,这里是个全局配置的地方。
====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========
推荐您阅读更多有关于“”的文章
合肥科大智能常年招聘.NET,Web前端,有想换工作的私聊我和AY交流
抖音号:wpfui,可以看到我的很多作品效果,私活合作请qq联系我
AYUI8社区版Github地址:前往获取
作者:杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司和AY交流
高中学历,2015年1月17日开始,兴趣学习研究WPF,目前工作繁忙,不接任何活
声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费.AY主要靠卖技术服务挣钱
不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo
查看捐赠AYUI7.X MVC教程 更新如下:
第一课 第二课 程序加密教程vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV
vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF
额 本文暂时没人评论 来添加一个吧
发表评论