当前位置:网站首页 / vue2.X / 正文

【AY】从C#转web前端之路记录[2]-vue项目结构,vue-router接入

时间:2020年09月10日 | 作者 : aaronyang | 分类 : vue2.X | 浏览: 31次 | 评论 0

还是打开上篇的项目

以下内容学习,vue-cli3.x  vue2.x版本


image.png

在src中

image.png

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


image.png

选择vue2



安装vue-router

cd aystu项目,然后安装

npm install vue-router  --save-dev 

image.png

打开项目的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

image.png

此时你不必关闭启动的服务,继续修改js,修改html,vue文件,刷新浏览器就可以看到最新的效果

我们打开index.js

修改


image.png

然后保存,刷新浏览器

浏览器只有一个appvue上面的那个图了,

因为<router-view 无法找到了


浏览器地址 修改为 http://localhost:8080/helloworld2

又可以正确访问了,这里是个全局配置的地方。



====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang=======请不要转载谢谢了。=========

















推荐您阅读更多有关于“”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

合肥科大智能常年招聘.NET,Java,Web前端,有想找想换工作的私聊我AY唯一QQ:875556003和AY交流

抖音号:wpfui,可以看到我的很多作品效果

AYUI8社区版Github地址:前往获取

作者:杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司AY唯一QQ:875556003和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

标签列表