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

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

时间：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

安装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 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