Day02: 02 - 前端 - 开启专案、页面刻划、bootstrap-vue使用

Hi，搭给贺，我是Charlie！
在Day01当中，我们安装了所需的套件跟软件，还做了版面。
接下来，我们要开启新的专案，并且开始页面规划罗。

================================◉‿◉=================================

前端

先建立两个资料夹：backend & frontend。
在frontend的资料夹，档案路径列打上cmd进入命令提示字元，并在打开的命令提示字元中，打入：

$ npm install -g vue

此命令为安装node module，通用为npm install [module name]。

而在node module的安装中，又分为两种形式：

全域安装： npm install -g [module name]
专案安装： npm install --save [module name]

全域安装的话就是在每个地方都能使用，专案安装的话就是仅在这个专案中可使用。

接下来安装vue-cli：

$ npm install -g @vue/cli

安装好後，我们利用vue-cli来建立专案：

$ vue create keyboardmarket

create之後先进入Vue CLI介面，先选择Default([Vue 2] babel,eslint)，并等待建立专案完成，出现这个画面就代表初始化成功：

这个初始化成功包含了以下讯息：

初始化的是git repository
预先安装好了53个package
使用 npm run serve来启动指令

此时到frontend中看，可以看到已经建立好的专案，我们进到专案资料夹，并试着启动专案。
使用cd keyboardmarket进入到专案资料夹，打入以下指令：

$ npm run serve

出现这个画面就代表运行成功罗：

运行成功後打开浏览器输入localhost:8080，可以看到此画面：

後端

先在backend资料夹内打开cmd，并在cmd内打入：

$ django-admin startproject keyboardmarket

此命令是使用django-admin，也就是django预先安装的套件，新增一个名为keyboardmarket的project。
生成完後，可以看到backend中出现了专案资料夹，打入以下的指令试着启动专案：

$ python manage.py runserver

并在浏览器中输入localhost:8000，出现这画面的话就代表运行成功：

vue-router

在使用bootstrap-vue之前，我们必须安装另外一个套件：vue-router。

vue-router为路由器，功用是配置网站路由，例如我们URL中输入：
localhost:8080/#/index
这时候配置的router就会把路径导到index的组件。

由於我们使用的sublime text有Terminal Plugin，所以我们可以打开package.json文件，并在上方按右键 > Open Terminal Here，进入命令提示字元介面：

如果右键打开的是powershell，可以参考以下的文章修改：
https://packagecontrol.io/packages/Terminal

打开命令提示字元後，使用以下的指令安装；

$ npm install --save vue-router

安装完成後，我们必须先设定我们的专案使用vue-router，在专案中的src先新建一个router的资料夹，并在里面新增index.js：

新增完後，打入下面的程序码：

import Vue from 'vue'
import Router from 'vue-router'

// 让vue可以正常使用Router套件
Vue.use(Router)

/*
新增routes常数列表，包含多个Map
每个Map包含不同的path
格式为：
{
  path:'URL路径，例如index为/index',
  name:'Path名称',
  component: 组件名称，例如index的组件为indexPage.vue，就是引入并且填indexPage
}
*/
const routes = [
]

/*
新增Router物件，
base为基本路径，
routes则为上面新增的常数路径列表
*/
var router = new Router({
  routes
})

/*
预设index.js引入会返回router物件
*/
export default router


export default router

接着打开src\main.js，引入router并且使用：

import router from './router'

new Vue({
  render: h => h(App),
  router // 新增router到这边
}).$mount('#app')

接着修改App.vue，让router转送的view可以显示其中：

<template>
  <router-view></router-view>
</template>

接着我们试试看router，在routes中建立以下路径：

import helloPage from '@/components/HelloWorld.vue'

const routes = [
  {
    path: "/hello",
    name: "helloPage",
    component: helloPage
  }
]

**** 注意! 在撰写vue档案的时候，请务必注意空格跟tab是否混用，以及缩牌是否正确 ****

新增完後，一样使用npm run serve启动专案，并且输入localhost:8080/#/hello测试：

如果看到这个页面，就代表router运行成功罗！

boostrap-vue

bootstrap-vue是bootstrap的vue版，里面支持了很多bootstrap的组件，官网网址如下：
https://code.z01.com/bootstrap-vue/docs/
官网文档可以从首页的Doc进入，可以看到里面Components的部分，里面有很多可用的组件范例：

首先先安装所需的套件，一样到package.json所在资料夹，输入以下指令安装：

$ npm install --save bootstrap-vue
$ npm install --save bootstrap

安装完後，在main.js当中新增程序码，使用bootstrap-vue：

import { BootstrapVue } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

接着我们在components中新增indexPage.vue，新增以下程序码：

<template>
	<div id="app">
		<h1>index</h1>
		<b-button variant="danger">Test Button</b-button>
	</div>
</template>

<script>
  export default{
    name:"indexPage",
    data(){
      return {
        isLogin: false
      }
    }
  }
</script>

并在routes中新增path：

  {
    path: "/index",
    name: "indexPage",
    component: indexPage
  }

因为Vue.js支援热重启，所以直接前往localhost:8080/#/index，看到以下结果就成功罗：

在此，会发现无论是title还是ico，都是vue预设的。
为了要使用自己的ico(Hatchful下载的图示里面有)跟title，必须修改一些程序码。
首先是title：

在routes里面新增meta属性：

  {
    path: "/index",
    name: "indexPage",
    component: indexPage,
    meta: {
      title: '首页'
    }
  }

接着设定routes在进入路径前，载入title属性：

router.beforeEach((to,from,next) => {
  if(to.meta.title){
    document.title = to.meta.title
  }
  next()
})

接着我们在template当中新增link icon语句，并且用html包起全部语句：

<template>
	<html lang="zh-Hant-TW">
		<link rel="icon" type="image/x-con" href="@/assets/favicon.ico">
		<div id="app">
			<b-button varient="danger">button test</b-button>
		</div>		
	</html>
</template>

重新运行过後，就可以看到favico跟title都正确了：

而bootstrap-vue我们主要会使用到navbar、carousel、Table、form等组件，还有boostrap当中最为重要的Grid-System。

另外在此推荐一个iconhub，这里面可以下载svg icon，这个专案中的icon很多也是这里下载的：
https://iconhub.io/

最後完成了首页，还有专案架构：

================================◉‿◉=================================

Day02到这边结束，在Day02当中，我们完成了首页，然後把整个专案都建立起来了。在Day03当中，我们将继续刻画页面，See ya next day！

<<: 【Day16】箭头函式

>>: Kotlin Android 第11天，从 0 到 ML - Kotlin Coroutine

[Day4] Android - Kotlin笔记：RecyclerView Adapter - ListAdapter + DiffUtil

杂谈

【Day 06】领域驱动设计的战略设计(Strategic Design)

杂谈

Day9 Git

杂谈

Day13 Docker compose

杂谈

Normals & Lighting

杂谈

18. PHPer x API document x Swagger API

想当一个 Good PHPer，不但要写程序、写注解还要写 API 文件，想到要维护三个地方工程师就...

JS [笔记] Javascript 优良部分、糟糕与不良的部分

优良部份1~5 1. 宽松型别（loose typing）及易转型 https://codepen...

Day 3 - 新人报到前的准备与莫名的焦虑感

确定了offer也确定了报到时间後，距离到职日大概还有两周多的时间，因为自己是北漂青年因此开始寻找後...

Unity与Photon的新手相遇旅途 | Day7-角色移动

今天讲的内容为角色移动的程序！ ...

Day 27. 我要准时下班- Figma Plugin (下)

上一篇介绍了 plugin 是什麽、如何安装使用，以及推荐的插件。今天我们实际透过这些插件实作一个简...