# vue项目框架（纯净版）

**Repository Path**: id535246/vue_project_framework__pure

## Basic Information

- **Project Name**: vue项目框架（纯净版）
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2019-12-21
- **Last Updated**: 2022-02-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue项目框架

#### 介绍
USDT钱包

#### 软件架构
脚手架 vue cli3.0
UI：mand Mobile UI框架，官方文档： https://mand-mobile.gitee.io/docs/index.gitee.html#/zh-CN/docs/introduce


#### 安装教程

1.  安装Git（可选）

    进入Git官网，下载安装Git

    https://www.git-scm.com/downloads

2.  安装Nodejs

    进入Node官网，下载安装Node

    www.nodejs.org

3.  安装 cnpm （npm淘宝镜像）（可选）

    npm install -g cnpm --registry=https://registry.npm.taobao.org

4. 安装 vue-cli

    cnpm install -g @vue/cli

    如果你已经安装了vue-cli2，需要先卸载vue-cli2（cnpm uninstall vue-cli -g）然后在安装vue-cli3（cnpm install -g @vue/cli）

5.  搭建vue项目

    如果你使用的是 vue-cli2；通过下面命令来搭建项目

    vue init webpack myproject

    如果你使用的是 vue-cli3；通过下面命令来搭建项目
    vue ui

6.   项目运行

     cnpm run serve

7.  项目打包

    通过CMD或者Git bash或者编辑器终端运行 cnpm run build；执行完毕会在根目录生成一个dist文件夹，文件夹下的文件就是我们生产环境需要用到的
    生成的dist文件夹下的 index.html 并不能直接运行。需要放到服务器 或者在虚拟环境下运行

8.  插件、依赖包安装

    通过命令 cnpm install xxxxxx 安装（简写 cnpm i xxxxxx），如果是vue-cli3搭建的项目可以通过命令vue ui 然后在网页上进行依赖的安装

    安装依赖（cnpm install xxxxxx --save-dev）安装并写入package.json的”dependencies”中、安装插件（cnpm install xxxxxx --save）安装并写入package.json的”devDependencies”中）；‘依赖’为开发环境用的（eslint、bable等），‘插件’为生产环境用到的包（vue、axios、vue-router等）

9.  插件、依赖包删除

    通过命令 cnpm uninstall xxxxxx 删除

    （npm uninstall xxx）删除xxx依赖，（npm uninstall xxx -g）删除全局依赖xxx；也可以通过删除package.json中对应的包，然后把node_modules删除了，在重新cnpm i 下载

10. 安装Mand Mobile

    cnpm install mand-mobile --save



#### 安装项目插件和依赖

1.  安装插件vue-router

    cnpm i vue-router --save

2.  安装插件axios  
 
    cnpm i axios --save

3.  安装插件vue-clipboard2（实现剪切板功能）

    cnpm i vue-clipboard2  --save
	
4.	安装国际化插件i18n （多语言插件）
	
	cnpm i vue-i18n --save
	
	在main.js中
	引入 import i18n from '@/language/i18n'  //国际化插件
	
	new Vue({
	  router,
		i18n, //挂载
	  render: h => h(App)
	}).$mount('#app')
	
	在src文件夹下创建language文件夹
	
	在i18n.js中配置

	import Vue from 'vue'
	import VueI18n from 'vue-i18n' // 引入并使用vue-i18n插件
	import comm from '@/assets/js/common'
	Vue.use(VueI18n)

	// 以下为语言包单独设置的场景，单独设置时语言包需单独引入
	const messages = {
	  'zh': require('./zh'),   // 中文语言包
	  'en': require('./en'),    // 英文语言包
	  'ko': require('./ko')    // 英文语言包
	}

	// 最后 export default，这一步肯定要写的。
	export default new VueI18n({
	  locale: comm.getItem('lang') || 'zh', // 获取需要显示的语言
	  messages: messages // set locale messages
	})

	在需要配置语言的地方使用t函数
	{{$t("home.menu.profile")}}

5.  安装插件mand mobile （UI插件）

    cnpm install mand-mobile --save

6.  安装依赖postcss-pxtorem  （postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。）

    cnpm install postcss-pxtorem --save-dev
    
7.  安装svg-sprite-loader（自定义svg图标）

    cnpm install svg-sprite-loader --save-dev

    cnpm install svgo-loader --save-dev
  
8.  安装依赖babel-plugin-import（按需引入mand mobile组件）
	
	cnpm install babel-plugin-import --save-dev


#### 配置项目
1.	创建vue.config.js文件
	设置域名、命名规则等
	
2.  配置babel.config.js
    
    module.exports = {
      presets: [
        '@vue/app'
      ],
      "plugins": [
        ["import", {
          "libraryName": "mand-mobile",
          "libraryDirectory": "lib"
        }]
      ]
    }

	
2.	修改App.vue页面文件
	设置动态路由和页面切换动画效果
	
3.	修改main.js
	配置公共插件，公共方法
		
	
4.	创建views文件夹,在该文件夹下创建页面
	
5.	创建router.js
	新建路由文件，设置页面路由
	
6. 创建js文件，设置公共js



	

#### 动态路由设置
1.  创建router.js文件，配置路由信息

2.  创建home.vue组件，包裹导航栏的主页面路由
	<div class="home-wrapper">
		<router-view />
	</div>
3.  创建router.js路由文件
    import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    export default new Router({
    
        routes: [
            {
                path: '/login',
                name: 'login',
                // 路由级代码拆分,这将为此路由生成单独的块,当路线被访问时延迟加载 (路由懒加载)
                component: () => import(/* webpackChunkName: "login" */ './views/login/login.vue'),
                meta: {
                    title: '登录',
                }
            },
            //登录后的入口页
            {
                path: '/',
                name: 'home',
                component: () => import(/* webpackChunkName: "home" */ './views/home.vue'),
                redirect: 'index',    //默认显示子路由
                meta: {
                    requireAuth: true //首页验证是否登录（只有首页验证）
                },
                //子路由
                children: [
                    {
                        path: 'index',
                        name: 'Index',
                        component: () => import(/* webpackChunkName: "home" */ './views/home/index.vue'),
                        meta: {
                            title: '首页',
                        }
                    },
                    {
                        path: 'payment',
                        name: 'payment',
                        component: () => import(/* webpackChunkName: "home" */ './views/payment/index.vue'),
                        meta: {
                            title: '支付',
                        }
                    },
                    {
                        path: 'user',
                        name: 'user',
                        component: () => import(/* webpackChunkName: "home" */ './views/user/index.vue'),
                        meta: {
                            title: '我的',
                        }
                    }
                ]
            }
        ]	
    })