vue.js学习 踩坑第一步
1.首先安装vue-cli脚手架
2.项目呈现效果
项目中主要用了Flex布局，以及viewport相关知识，已达到适应各终端屏幕的目的
3.项目主要目录
4主要代码如下
（1）App.vue
rush:js;">
（2）main.js
rush:js;">
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import VueRouter from 'vue-router';
import router from './router';
import App from './App';
Vue.config.productionTip = false;
Vue.use(VueRouter);
/* eslint-disable no-new */
new Vue({
el: '#app',router,template: '',render: h => h(App)
});
（3）index.js //这个就是路由的配置
这个可以直接写进main.js 也可像我一样在main.js中引入，各有各的好处
rush:js;">
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
routes: [{
path: '/langren',component: require('../components/vue/langren.vue')
},{
path: '/sanguo',component: require('../components/vue/sanguo.vue')
},{
path: '/yingxiong',component: require('../components/vue/yingxiong.vue')
},{
path: '/',component: require('../components/content/content.vue')
}]
});
export default router;
也可以直接写一个routers.js放在src目录下
(4)router.js
rush:js;">
import langren from './components/vue/langren.vue';
import sanguo from './components/vue/sanguo.vue';
import yingxiong from './components/vue/yingxiong.vue';
const routers = [
{
path: '/langren',component: langren
},component: sanguo
},component: yingxiong
}
];
export default routers;
(5)content.vue
rush:js;">
我是content！