如何快速构建一个网站

很多自由开发者可能只会代码,但是没有美功功底。导致实现的网站可能没有那么UI友好。本文描述一个基于Vuetify开源项目的网站构建方法。美工和基本网站结构已经完全实现好了。

我们只需要学会使用这个项目的布局功能,UI Components,还有些效果,自定义主题等。就可以自己开发出一个强大的网站。基本结构已经集成了导航,顶部栏,效果也非常好,支持深浅颜色的切换。有想深入了解的可以看看官方文档,中英文都支持。Vuetify

Vuetify项目本身是基于Material Design,使用Vue的组件封装的。通过使用预定义的模板结构,可以快速开始开发,让我们专注于应用层。同时不缺失美化效果。

Vuetify目前一共预置了9种模板,可以灵活选择一种。包括了简单的DEMO演示,Electron桌面程序,Webpack,Nuxt,Cordova,pwa。根据自己的熟悉程序选择任意一种就可以马上着手开发。本文主要演示Nuxt模板。其它都大同小异,异在模板结构的内容不一样。

Vuetify支持主流的浏览器,支持mobile端自适应,不需要我们再花费额外的精力去自适应。

本文需要读者有Vue开发的基础,Vue是一个基于组件,使用javascript渲染的前端框架。学习起来也很容易,可以去官网看看。同时还需要nuxt.js基础,nuxtjs是一个创建vue应用的框架。支持服务端渲染,或者生成静态的网站文件,可以看看官方文档

安装 Vue-cli

要生成网站初始结构文件,需要用到Vue的官方vue-cli命令,通过提供模板的参数和项目名称,就可以生成我们想要的网站结构。使用vue-cli之前必须需要安装nodejs,根据自己的操作系统进行相应的版本安装,已经安装了的小伙伴请直接忽略,不过建议升级到最新的LTS版本。Current版本也应该问题不大。

打开命令行,输入

# npm install -g vue-cli

安装完成后,输入

# vue -V

出来版本号时表示安装成功。

生成Vuetify-Nuxt模板

在命令行中找到想保存代码的目录,然后输入

vue init vuetifyjs/nuxt vuetify-nuxt-project

执行后,会提示一些初始参数的设置,名称,项目描述,作者,是否使用a-la-carte功能等选择,根据自己的需要进行输入。

a-la-carte功能旨在减少最终生成网站文件的时候,去掉没有引用到的vue组件,从而减少网站包的整体大小,这样在实际访问的时候,下载相关文件的速度会加快,从而加快了网站的加载速度。对用户体验有很大的提升。但是很多开发者都忽略了这一点,任何网站应该都遵守这个原则。

进入目录

# cd vuetify-nuxt-project

安装npm依赖

# npm install

运行开发模式

# npm run dev

开发模式在实时修改了代码的同时,网页上会实时反映出效果,这对前端开发来说很方便的,不需要频繁的切换来切换去,刷新网页啥的,去年以前大家都还在研究gulp,grunt,browserify等自动化的东西,现在很多东西都已经有集成的解决方案,大大的加快了开发和学习的速度。能更好的专注在应用层的开发。

现在可以在浏览器中打开默认地址:localhost:3000,效果如下:

v1

我觉得这个效果对于个人开发者开发简单项目的时候是足够了。

编辑代码

我使用的vscode来编辑代码,这都是个人选择,像github的Atom也可以。如果有想尝试vscode的可以点此下载。使用VSCode打开我们的网站文件夹,初始目录结构如下

v2

添加一个页面

在pages目录下面新建一个文件,demo.vue。输入如下内容:

<template>
<v-layout>
<v-flextext-xs-center>
<imgsrc=”/v.png”alt=”Vuetify.js”class=”mb-5″>
<h1>Demo Page</h1>
<p>This is a Demo page.</p>
</v-flex>
</v-layout>
</template>
保存,在浏览器中输入:localhost:3000/demo,哇啦
v3.png
恩,添加一个页面就是这么简单。

添加Demo页导航

页面有了,现在需要将页面的路由加到边栏导航中。我们打开layouts目录下的default.vue文件,在文件的底部,找到items数组,添加一个导航,如下所示:

{ icon: ‘apps’, title: ‘Welcome’, to: ‘/’ },
{ icon: ‘bubble_chart’, title: ‘Inspire’, to: ‘/inspire’ },
{ icon: ‘pets’, title: ‘Demo’, to: ‘/demo’ }
保存default.vue文件,网页自动刷新,Demo导航菜单已经可以使用。
icon的值可以在这里找到,如果有空格,在我们这里需要将空格转成下划线使用。

添加一个UI component [Data-tables]

我们在Demo.vue中的<p>This is a Demo page.</p>后面加入如下内容

<v-data-table :headers=”headers” :items=”items” hide-actions class=”elevation-1″ >
<templateslot=”items”slot-scope=”props”>
<td>{{ props.item.name }}</td>
<tdclass=”text-xs-right”>{{ props.item.calories }}</td>
<tdclass=”text-xs-right”>{{ props.item.fat }}</td>
<tdclass=”text-xs-right”>{{ props.item.carbs }}</td>
<tdclass=”text-xs-right”>{{ props.item.protein }}</td>
<tdclass=”text-xs-right”>{{ props.item.iron }}</td>
</template>
</v-data-table>

在</template>后面加入如下脚本:

 

export default {
data () {
return {
headers: [
{ text: ‘Dessert (100g serving)’, align: ‘left’, sortable: false, value: ‘name’ },
{ text: ‘Calories’, value: ‘calories’ }, { text: ‘Fat (g)’, value: ‘fat’ },
{ text: ‘Carbs (g)’, value: ‘carbs’ }, { text: ‘Protein (g)’, value: ‘protein’ },
{ text: ‘Iron (%)’, value: ‘iron’ } ],
items: [
{ value: false, name: ‘Frozen Yogurt’, calories: 159, fat: 6.0, carbs: 24, protein: 4.0, iron: ‘1%’ },
{ value: false, name: ‘Ice cream sandwich’, calories: 237, fat: 9.0, carbs: 37, protein: 4.3, iron: ‘1%’ },
{ value: false, name: ‘Eclair’, calories: 262, fat: 16.0, carbs: 23, protein: 6.0, iron: ‘7%’ },
{ value: false, name: ‘Cupcake’, calories: 305, fat: 3.7, carbs: 67, protein: 4.3, iron: ‘8%’ },
{ value: false, name: ‘Gingerbread’, calories: 356, fat: 16.0, carbs: 49, protein: 3.9, iron: ‘16%’ },
{ value: false, name: ‘Jelly bean’, calories: 375, fat: 0.0, carbs: 94, protein: 0.0, iron: ‘0%’ },
{ value: false, name: ‘Lollipop’, calories: 392, fat: 0.2, carbs: 98, protein: 0, iron: ‘2%’ },
{ value: false, name: ‘Honeycomb’, calories: 408, fat: 3.2, carbs: 87, protein: 6.5, iron: ‘45%’ },
{ value: false, name: ‘Donut’, calories: 452, fat: 25.0, carbs: 51, protein: 4.9, iron: ‘22%’ },
{ value: false, name: ‘KitKat’, calories: 518, fat: 26.0, carbs: 65, protein: 7, iron: ‘6%’ }
]
}
}
}

保存,网页效果如下:

v4

由于博客编辑的时候,不能很好的保留编辑器的格式,所以上述代码在复制到你们的代码中时,可能会编译失败,主要是脚本代码的缩进问题。照着下图将格式调整好就行了:

v5.png

总结

本文着重描述了如何快速搭建网站开发的内容,其它还有很多内容需要读者们自己去学习,研究。从Vue到Nuxt.js到Vuetify的组件语言,布局调整,主题调整等很多内容。这是一个开发者必须经过的过程。没有任何便捷的路径,便捷的只是快速开始,本质的东西还是需要深入学习,多用多学,慢慢累积就可以熟练使用,到那时候回过头来,也会发现以前的努力都是值得的。充实了自己的技术功底,找工作也是游刃有余。是吧?

我要打赏,谢谢支持!

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google+ photo

You are commenting using your Google+ account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s