# vue的手工配置

**Repository Path**: imoomoo_admin/manual_configuration_of_vue

## Basic Information

- **Project Name**: vue的手工配置
- **Description**: 非脚手架，使用手工配置的模式，实现vue + webpack + vue-loader的开发模板，可用于基于vue的开发。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2018-10-05
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue的手工配置

#### 项目介绍
本项目使用手工配置的模式，非脚手架，实现vue + webpack + vue-loader的开发模板，可用于基于vue的开发。

#### 软件架构
软件架构


#### 安装教程

1. cnpm i
2. npm run dev
3. npm run build

#### 使用说明

1. 部分包使用npm安装容易失败，推荐是cnpm安装。
2. 安装淘宝cnpm命令：npm install cnpm -g --registry=https://registry.npm.taobao.org
3. 结合git管理项目的说明：
    + 1.在项目根目录的.gitignore是git提交时，忽略的目录
    + 2.在本地项目目录初始化本地仓库，git init
    + 3.git add .
    + 4.git commit -m "init project"
    + 5.在码云新建项目，
    + 6.git remote add origin git@gitee.com:imoomoo_admin/manual_configuration_of_vue.git
    + 7.git push -u origin master



### 这是一个手工建立 vue + webpack + vue-router 的基本模板，可用于基于vue开发的程序。尽量添加每一处的注释，便于理解vue的工作原理

#### 制作首页APP组件

#### 改造tabbar 为router-link

#### 设置路由高亮

#### 点击tabbar 中的路由链接，展示对应的路由组件

#### 制作首页轮播图，加载轮播图数据
    1.获取数据，如何获取呢？使用vue-resource
    2.使用vue-resource 的 this.$http.get 获取数据
    3.获取的数据要保存到 data 上
    4.使用v-for 循环渲染每个 item 项

##### 添加基于微信的组件库，需要进行的工作
    1.安装vux组件库。命令：cnpm i vux --save
    2.由于vux-loader可以实现VUX组件的按需调用。需要安装vux-loader 并修改webpack.config.js
        2.1 https://doc.vux.li/zh-CN/vux-loader/install.html
            2.1.1 把原来webpack.config.js的配置放到变量webpackConfig里
                const webpackConfig = {} // {}内填写原来的 webpack.config.js 配置.但const变量，要写在{}外

            2.1.2 修改.vue的加载器
                {
                    test: /\.vue$/,
                    loader: 'vue-loader',
                    options: {
                        loaders: {
                            // Customize to your liking
                            js: 'babel-loader',
                            scss: [
                                'style-loader',
                                'css-loader',
                                'sass-loader'
                            ]
                        }
                    }
                }
            2.1.3 增加配置resolve
                resolve:{
                    alias: {
                        'vue$': 'vue/dist/vue.esm.js'
                    },

                }
        2.2 最终提交的部分。其中，webpackConfig即2.1修改的部分内容。
            const vuxLoader = require('vux-loader')

            module.exports = vuxLoader.merge(webpackConfig, {
                options: {},
                plugins: [
                    {name: 'vux-ui'},
                    {name: 'duplicate-style'},
                    {
                        name: 'i18n',
                        vuxStaticReplace: false,
                        staticReplace: false,
                        extractToFiles: 'src/locales/components.yml',
                        localeList: ['en', 'zh-CN']
                    }
                ],
                resolve: {
                    extensions: ['', '.js', '.vue', '.json']
                }
            })