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

微信扫一扫,分享到朋友圈

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

还是打开上篇的项目

以下内容学习,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

安装vue-router

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 src="https://www.tuicool.com/articles/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 src="https://www.tuicool.com/articles/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=======请不要转载谢谢了。=========

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

微信扫一扫,分享到朋友圈

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

科学家展示抗癌新方法 通过分子纤维网由内而外杀死癌细胞

上一篇

日本工作机械工业会:2020年8月日本机床订单额为678亿日元,同比下滑23.3%

下一篇

你也可能喜欢

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

长按储存图像,分享给朋友