vue。js学习踩坑第一步
<强> 1。首先安装vue-cli脚手架
不多赘述,主要参考Vue爬坑之路(一)——使用vue-cli搭建项目
,
<强> 2。项目呈现效果
项目呈现网址:www.zhoupeng520.cn/index.html
项目中主要用了Flex布的局,以及视窗相关知识,已达到适应各终端屏幕的目的
<强> 3。项目主要目录
<强> 4主要代码如下,
(1)App.vue
& lt; template>
& lt; div id=坝τ谩北?
& lt; router-view类="视图"祝辞& lt;/router-view>
& lt; div类="导航"比;
& lt; router-link类=皀av-item”=?langren”在狼人杀& lt;/router-link>
& lt; router-link类=皀av-item”=?三国”在三国杀& lt;/router-link>
& lt; router-link类=皀av-item”=?集团”在英雄杀& lt;/router-link>
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
& lt;/script>
& lt; style>
#应用{
高度:100%;
显示:flex;
flex-direction:列;
flex: 1;
}
.nav {
身高:80 px;
行高:80 px;
显示:flex;
text-align:中心;
}
.nav-item {
flex: 1;
文字修饰:没有;
}
.nav-item:链接,.nav-item:访问{
背景颜色:白色;
颜色:黑色;
}
.nav-item:悬停,.nav-item:主动{
颜色:白色;
background - color: # C8C6C6;
}
& lt;/style>
(2)main.js
//加载Vue构建版本的“进口”命令//(运行时只或独立)被设置在webpack.base。配置一个别名。
从“进口Vue Vue ';
从“进口VueRouter vue-router ';
从“进口路由器。/路由器”;
导入应用程序从“。/App”;
Vue.config。productionTip=false;
Vue.use (VueRouter);/* eslint-disable没有新*/新Vue ({
埃尔:“#应用”,
路由器,
模板:“& lt;/App>”
呈现:h=比;h(应用)
});
(3)指数。js//这个就是路由的配置
这个可以直接写进主要。js也可像我一样在main.js中引入,各有各的好处
从“进口Vue Vue ';
从“进口VueRouter vue-router ';
Vue.use (VueRouter);
const路由器=new VueRouter ({
路线:[{
路径:/langren,
组件:要求(“. ./组件/vue/langren.vue”)
}， {
路径:/三国时期,
组件:要求(“. ./组件/vue/sanguo.vue”)
}， {
路径:/集团的,
组件:要求(“. ./组件/vue/yingxiong.vue”)
}， {
路径:“/?
组件:要求(“. ./组件/内容/content.vue”)
})
}）;
出口的默认路由器;
也可以直接写一个routers.js放在src目录下
(4)router.js
从’。/组件/导入langren vue/langren.vue ';
从’。/组件/导入三国vue/sanguo.vue ';
从“进口集团。/组件/vue/yingxiong.vue”;
const路由器=[
{
路径:/langren,
组件:langren
}，
{
路径:/三国时期,
组件:三国时期
}，
{
路径:/集团的,
组件:英雄
}
];
出口的默认路由器;
(5)content.vue
& lt; template>
& lt; div类="内容"祝辞& lt; p>我是内容! & lt;/p> & lt;/div>
& lt;/template>
& lt;脚本类型=拔谋?ecmascript-6”比;
出口默认{};
& lt;/script>
& lt;风格lang="笔" rel=把奖?笔”在
.content
高度:100%
背景:蓝色
flex: 1
显示:flex;
justify-content:中心
对齐项目:中心
& lt;/style>
<代码> langren。vue/三国。vue/集团。vue 代码和这个一样只是颜色和p中字段改了下。
主要代码就这些了只
<强> 5。另外写一下主要遇到的报错以及解决方法
(1)由于是用来es6的语法,所以要遵循它的一些语法规则,所以有的代码最后要多一行空行,有的要加分号,有的要加空格,根据报错来进行更改
