VUE項目學習——入門篇

準備

• 首先刪除vue demo hello vue相關代碼和文件

  • components下的helloworld.vue
  • app.vue 中的img 標籤
  • router中的helloworld聲明和引用
• 引入一個簡單的樣式組件庫 npm i element-ui -S 方便書寫幾個簡單組件舉例學習

• 目錄初始化

  • 在src目錄下新建views文件夾

  • 在 assess目錄下新建 js、css、font、img四個文件夾

    • 在 css目錄下新建 common.css文件

  • 在 components目錄下新建 ui文件夾（用於存放純ui性質組件）

    • 在 ui目錄下新建 index.js文件
  • 在views目錄下新建viewPage一、viewPage2文件夾及文件夾下的index.vue（實際應用中的兩個子頁面或者子功能）

  • 在build目錄下webpack.base.conf.js文件的alias對象中添加幾個屬性

    • '@components': resolve('src/components'),
    • '@ui': resolve('src/components/ui'),
    • '@static': resolve('static'),
    • '@assess': resolve('assess'),
    • 在以後的impotent引用中便可使用@**代替相應較長的目錄（webpack構建時會檢測替換）
• 在main.js中引入common.css 和 ui/index.js
  import '@assess/css/common.css'
  import commonUI from '@ui/index.js'
  Vue.use(commonUI)

• 在main.js中註冊element-ui的部分組件

• 在router中註冊這兩個子頁面

  • paht：‘/’爲page1，即項目首頁變成了page1

簡單clone一個頁面

• 簡單複製一下vue指南官網 https://cn.vuejs.org/v2/guide/
• 很明顯該頁面佈局採用頂欄+左側邊欄佈局，很像ui中的Container 佈局容器

• 接下來咱們只須要在page1中使用這些樣式庫中的容器組件便可

  • 接下來還能夠在components目錄中新建一些組件或者隸屬於page1頁面本身的子組件在page1目錄中新建一個widgets目錄下
  • 總之能夠本身按照使用element-ui組件的方式自建一些組件試試看
• 項目中的ESlint代碼規範檢查還未通過配置，vue官方demo項目每行語句後面的風格都是不加分號，不推薦