1. 程式人生 > >VUX學習總結.md

VUX學習總結.md

str org 分享 attribute 狀態 const 靜態資源 重載 開發環境

目錄

  • 一、VUX介紹
  • 二、知識點
  • 三、項目結構
  • 四、本地開發環境安裝
  • 五、學習路徑
  • 六、項目發布

一、VUX介紹

VUX,一個基於VUE+WeUI+Webpack的UI框架。

  • VUE是漸進式的前端框架,支持熱模塊加載,可以很大程序上提高頁面的渲染速度;
  • WeUI是微信官方團隊開源的微信UI框架;
  • VUX在線DEMO(https://vux.li/))
  • VUE官方教程(https://cn.vuejs.org/v2/guide/)

二、知識點

  • npm常用命令
  • nodejs
  • webpack(模塊打包器https://doc.webpack-china.org/concepts/)
  • ES2015/16(重點學習let和const使用,http://es6.ruanyifeng.com/#docs/let)
    - vue(https://cn.vuejs.org/v2/guide/)
  • vuex(狀態管理模式https://vuex.vuejs.org/zh-cn/intro.html)
  • vue-router(頁面路由管理https://router.vuejs.org/zh-cn/essentials/getting-started.html)
  • vue-loader(模塊加載器https://vue-loader.vuejs.org/zh-cn/)
  • axios\superagent(http請求庫,推薦使用axios,https://www.kancloud.cn/yunye/axios/234845)

三、項目結構

.
|-- build // 項目構建(webpack)相關代碼
| |-- build.js // 生產環境構建代碼
| |-- check-version.js // 檢查node、npm等版本
| |-- dev-client.js // 熱重載相關
| |-- dev-server.js // 構建本地服務器
| |-- utils.js // 構建工具相關
| |-- webpack.base.conf.js // webpack基礎配置
| |-- webpack.dev.conf.js // webpack開發環境配置
| |-- webpack.prod.conf.js // webpack生產環境配置
|-- config // 項目開發環境配置
| |-- dev.env.js // 開發環境變量
| |-- index.js // 項目一些配置變量
| |-- prod.env.js // 生產環境變量
| |-- test.env.js // 測試環境變量
|-- src // 源碼目錄
| |-- assets // 靜態資源
| |-- components // vue公共組件
| |-- libs // vue幫助類
| |-- mock // mock數據
| |-- plugins // vue插件
| |-- router // 頁面路由
| |-- store // vuex的狀態管理
| |-- utils // js工具類
| |-- views // 視圖頁面
| |-- App.vue // 頁面入口文件
| |-- main.js // 程序入口文件,加載各種公共組件
|-- static // 靜態文件,比如一些圖片,json數據等
|-- .babelrc // ES6語法編譯配置
|-- .editorconfig // 定義代碼格式
|-- .gitignore // git上傳需要忽略的文件格式
|-- README.md // 項目說明
|-- favicon.ico 
|-- index.html // 入口頁面
|-- package.json // 項目基本信息
.

- package.json文件是項目根目錄下的一個文件,定義該項目開發所需要的各種模塊以及一些項目配置信息(如項目名稱、版本、描述、作者等)。

四、本地開發環境安裝

1.安裝nodejs和npm

npm是包管理工具,會隨同nodejs一起安裝;
nodejs安裝包地址:https://nodejs.org/en/download/current/
安裝完成,輸入node -v成功顯示當前nodejs版本號,即安裝成功,查看npm版本npm -v

2.修改NPM源為國內淘寶鏡像

// 使用cnpm通過國內鏡像下載依賴包
npm install -g cnpm --registry=https://registry.npm.taobao.org
// 使用
cnpm install express

3.sublime代碼高亮

這裏推薦編輯器sublime。
https://www.zhihu.com/question/52215834

4.VUE調試神器

chrome安裝插件vue-devtools,用於調試vue應用,這可以極大地提高我們的調試效率。
技術分享圖片

五、學習路徑

1. 學習VUE官方教程

官方教程地址https://cn.vuejs.org/v2/guide/index.html,對照教程,使用script腳本直接引入的方式跑一遍,了解相關語法使用,推薦code在線編輯器RUNJS(http://runjs.cn/)。

2. 熟悉VUX框架

框架目錄如下,詳細介紹見大點二介紹。
技術分享圖片

下載附件中的vux-demo項目代碼到本地,按以下步驟跑起來。

# 安裝依賴
$ cd vux-demo
$ cnpm install
// 運行項目
$ npm run dev
2.1 學習vue-loader\vuex\vue-router的使用

結合項目代碼和官方教程,學習vue-loader\vuex\vue-router的使用,代碼中均有相關示例代碼可借鑒。

2.2 學習組件開發

組件示例:

<template>
<div id="app-5">
  <p>{{ message }}</p>
  <router-link to="hello">hello</router-link>
</div>
</template>
<script>
export default {
  name: ‘HelloWorld‘,
  data () {
    return {
      message: ‘Welcome to Your Vue.js App‘
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
2.3 學習VUX框架組件使用

VUX框架提供了豐富的組件,包括表單、彈窗、布局、樣式等,了解VUX組件的使用。

組件列表:https://vux.li/#/zh-CN/components

2.4 學習自定義插件開發

插件模板:

/* eslint-disable */
// This is your plugin object. It can be exported to be used anywhere.
const MyPlugin = {
  // The install method is all that needs to exist on the plugin object.
  // It takes the global Vue object as well as user-defined options.
  install(Vue, options) {
    // We call Vue.mixin() here to inject functionality into all components.
    Vue.mixin({
      // Anything added to a mixin will be injected into all components.
      // In this case, the mounted() method runs when the component is added to the DOM.
      mounted() {
        console.log(‘Mounted!‘);
      }
    });
  }
};
export default MyPlugin;

六、項目發布

進入根目錄,編譯:npm run build,編譯成功後,在當前目錄下會產生dist文件夾,將裏邊的文件發布到服務器即可。

VUX學習總結.md