VUX學習總結.md
阿新 • • 發佈：2018-07-05
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 dev2.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