VUX学习总结.md

Posted 2020-11-21 vipinchan

目录

• 一、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/）
• axiossuperagent（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-loadervuexvue-router的使用

结合项目代码和官方教程，学习vue-loadervuexvue-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文件夹，将里边的文件发布到服务器即可。