日誌——Vue.js開發線上簡歷生成器

Sam-Pig發表於2018-05-12
Vue.js

第一次用vue，怕自己忘了...

準備工作

  • 在github上新建一個倉庫vue-resumer-1；

  • clone到本地；

  • 在本地開啟終端，cd到當前目錄；

  • 輸入npm config set registry https://registry.npm.taobao.org/，設定npm下載途徑；

  • 輸入npm init -y建立一個package.json（可自行修改）；

  • 輸入npm install -g vue-cli下載安裝vue-cli命令列工具；

  • 輸入vue init <template-name> <project-name>，這裡就輸入vue init webpack .即可；

  • 一路選擇Y；

  • 提示你選擇Runtime + Compiler或者Runtime-only，前者適合瀏覽器環境（Compiler就是把HTML變成JS再把JS反饋到頁面中），後者適合nodejs環境，這裡選擇前者；

  • 提示Install vue-router?，選擇n，因為手動安裝更容易理解；

  • 提示Use ESLint to lint your code?，選擇n，因為ESLint有許多奇奇怪怪的規則，第二次使用時就可以Use了；

  • 提示Setup unit tests with Karma + Mocha?，選擇n，很多公司是不寫單元測試的，所以也不選；

  • 提示Setup e2e tests with Nightwatch?，選擇n。

  • 提示vue-cli Generated "vue-resumer-1".，告訴你已經生成；

  • 輸入npm install;

  • push到github上，新增描述git commit -am "vue init webpack . && npm install"；

初識Vue

  • 輸入npm run dev，建立了本地伺服器，可以訪問頁面；

  • 開啟VScode，進入本地倉庫vue-resumer-1，檢視目錄結構；

  • 找到並開啟index.html，發現HTML結構怪異：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-resumer-1</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
複製程式碼
  • 檢查http://localhost:8080 頁面，發現瀏覽器裡實時文件結構是這樣的：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-resumer-1</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script type="text/javascript" src="/app.js"></script>
  </body>
</html>
複製程式碼

  • 對比發現，vue自動在HTML的<body/>前注入（inject）了一個JS指令碼，其src="/app.js"；

  • 進入./src/，發現只有assets、components、App.vue和main.js四個檔案（夾）；

  • 開啟main.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 App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',//容器
  components: { App },//ES6寫法
  template: '<App/>'//HTML文件
})
複製程式碼

  • 基本認識：index.html是HTML的入口檔案，main.js是JS的入口檔案，後者會自動注入到前者。

  • 開啟App.vue（這是已經修改過的檔案）：

<template>
  <div id="app">
    <Topbar class="topbar"/>
    <main>
      <Editor class="editor"/>
      <Preview class="preview"/>   
    </main>
  </div>
</template>

<script>
import Topbar from './components/Topbar'//不寫字尾也無所謂，因為它會自行查詢
import Editor from './components/Editor'
import Preview from './components/Preview'

export default {
  components: {
    Topbar,
    Editor,
    Preview
  }
}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.topbar {
  background-color: red;
}
main {
  background-color: blue;
  display: flex;
  flex: 1;
  > .editor {
    width: 20em;
  }
  > .preview {
    flex: 1;
  }
}
</style>
複製程式碼

  • 可以發現.vue字尾的檔案結構，就是<template><template/>、<script><script/>、<style><style/>三個根標籤組成的。

  • <template><template/>裡面是關於文件的總體結構，這裡的語法實際上是XML；
    <script><script/>裡面是配置要引入的元件；
    <style><style/>裡面是設定樣式；

  • .vue結尾的檔案，叫做“單檔案元件”，除了App.vue之外，都放在了components資料夾裡面；

  • 可以自己寫一個單檔案元件，如Topbar.vue，放在components資料夾裡，然後通過App.vue裡的

<script>
    import Topbar from './components/Topbar'
    export default{
        components: {
            "Topbar": Topbar
        }
    }
<script/>
複製程式碼

來引用，把<Topbar/>放在<template><template/>中你想要放置的位置，再通過<style><style/>來統籌App.vue的總體樣式。

  • 以上是第一種引用標籤的方式，即import它，還有一種方式：
    全域性註冊標籤（少用）

  • 我們可以在main.js檔案new Vue之前，註冊一個標籤：

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

Vue.component('Jack', {
  template: '<p>I am {{name}}</p>',
  data(){   //data必須是一個function
    return{
      name:'Jack Ma'
    }
  }
})

new Vue({
  el: '#app',
  components: { "App": App },//ES6語法，如果key和value是相同的，可以寫成components: { App }
  template: '<App/>'
})
複製程式碼

  • 這樣，就可以直接在App.vue的<template><template/>裡面新增<Jack/>了，就相當於是新增了子標籤<p>I am {{name}}</p>；

  • 另外，還可以把components裡的單檔案元件在main.js裡給註冊成全域性標籤：

import Hello from './components/HelloWorld'
Vue.component('Hello',Hello)
複製程式碼

這樣，HelloWorld.vue就可以不用在App.vue裡import就直接放入<template><template/>裡用了；

  • 總結一下：
  1. index.html是HTML的入口檔案，main.js是JS的入口檔案，後者會自動注入到前者；
  2. main.js主要負責import全域性變數和new Vue；
  3. App.vue負責import各component，整合APP的整體template和設定style；
  4. 各component放入components檔案裡，每一個都是一個單檔案元件，可以被App.vue和main.jsimport。

實現基本佈局

  • 總體思路：
    佈局無非就是topbar、editor、preview三個部分，可以做成三個單檔案元件，放進components資料夾裡，再在App.vue裡import並設定style；

  • 終端輸入npm i -S normalize.css引入normalize.css，在main.js裡import normalize.css；

  • 在assets資料夾裡新建一個reset.scss檔案，重置CSS，在main.js裡import './assets/reset.scss'，App.vue的style部分可以設定成<style lang="scss"><style/>；

  • 但要確保有sass-loader和node-sass，如果沒有，會報錯，可以在終端輸入npm i -g sass-loader和npm i -D node-sass；

相關文章