目录
- 一、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）
- 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 express3.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文件夹，将里边的文件发布到服务器即可。
原文地址：https://www.cnblogs.com/vipinchan/p/9265970.html