# vue3Init

**Repository Path**: ElloitYu/vue3-init

## Basic Information

- **Project Name**: vue3Init
- **Description**: vue3初始化项目
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-13
- **Last Updated**: 2021-09-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

* 技术栈: Vue3 + Vuex + VueRouter + Axios + Sass + Vite

## 安装依赖
* terminal：yarn

## 本地运行
* yarn dev 调试本地测试环境
* yarn productDEV 调试本地上线环境
* yarn testBuild 打包测试环境
* yarn build 打包上线环境


## 打包
* yarn build 打包正式网站文件
* yarn testBuild 打包测试网站文件


# 全局变量
**process.env: 项目开发、项目打包全局变量**

# 位置: 根目录/config/congfig.js

# 调用方式: process.env(object类型)

# Vuex: 项目开发vue全局变量
**目录:根目录/src/store，具体使用请看 https://vuex.vuejs.org/zh/**


## 目录结构

**公共目录 assets**
* 所有公用资源文件都放于 根目录/src/assets目录，包括css、image、font等

**单个网页** 
* 所有页面都放于 根目录/src/views目录下

**项目全局专用组件**
* 放于根目录/src/components/project下

## 目录结构图形
    |- config         // 项目全局静态变量配置文件夹
    |     |- elliotConfig.js // 全局静态变量，通过process.env获取，不同环境下的变量值不一样
    |- public   // 资源
    |     |- favicon.ico // 网页图标
    |     |- index.html // 整个页面的html文件，可以加载(绝对路径方式)其他js、css等文件
    |- dist   // 打包完成目录
    |- src        
    |     |- assets          // 静态资源目录
    |         |- css        // 公共css文件夹
                |- common.scss // 页面全局class类、项目专用设置页面的元素统一(如p标签设置为跟div一样,没有上下间隔)
                |- normalize.css // 让不同的浏览器在渲染网页元素的时候形式统一。
    |         |- img       // 公共img文件夹，所有的img静态资源都放这里
    |     |- components     // 组件库
    |         |- common        // 公共组件
    |         |- project        // 项目专用组件
    |     |- router         // 路由配置文件夹
    |         |- index.js        // 路由配置文件，定义页面path对应的页面级组件
    |     |- network     // 接口请求目录
    |         |- http.js  // 封装并导出以axios为基础的post、get方法，并设置一个请求对应一个ID，如果两个相同请求的ID一致，则第二个相同的请求会被取消
    |         |- request.js // 所有请求的公共函数(方法)。凡是有请求的，请先在这里先封装一个请求函数，导出后其他页面再加载执行
    |     |- store     // vuex相关
    |         |- index.js  // 组装模块并导出 store 的地方
    |     |- utils     // 公共设施(公用函数,方法)，只列重点、示例
    |         |- common        // 公共函数文件夹
                |- string.js // 专门处理string类型的方法
                |- regExp.js // 正则方法
          |- views     // 页面级组件，一个页面对应一个文件夹
              |- page // 页面文件夹
                |- page.vue // 页面vue文件
                |- page.js // 页面js文件
                |- page.scss // 页面scss文件
              |- page2 // 页面文件夹
                |- page2.vue // 页面vue文件
                |- page2.js // 页面js文件
                |- page2.scss // 页面scss文件
                

## 文件命名规范
**文件夹命名规范**
* 采用大小写字母组合，首字母小写的驼峰式写法

**VUE文件命名规范**
* 采用大小写字母组合，首字母小写的驼峰式写法，如userProfile.vue

**JS文件命名规范**
* 采用大小写字母组合，首字母大写的驼峰式写法，如userProfile.js

**SASS、LESS、CSS文件命名规范**
* 采用小写字母组合，单词间用`-`分割的形式，如user-profile.scss

**公共组件放置位置**
* 页面专用组件放于当前页面所在位置
* 所有页面公共组件，项目专用组件，则放于/src/components/project目录下
* 所有页面公共组件，公共组件(其他项目可以单独使用)，则放于/src/components/project目录下

# 代码规范
**代码编写规范**
* 采用空格缩进，4个空格为一个缩进。请更改IDE的Tab为4个空格。
* 除特殊情况，js语句末尾都取消;号
        
***js变量命名***
* 命名要见面知意，如，`game`,`isPlayGame` 除非是特殊的词语，如`alibaba` `taobao` 否则不要用拼音 。错误：`youxi`  ` v1` `v2` `v3` 。
* 变量命名采用首字母小写的驼峰形式，如`isNode` `testValue`,错误示范：`test_value`
* 静态变量采取大写字母组合"_"下划线连接，如`MESSAGE_TYPE"`
* 方法命名与变量一致，静态工具类首字母大写,如`Cache XCanvas`
* 方法名、变量需要加注释
        
***css变量命名***
* 命名要见面知意，如，`game`,`is-play-game` 除非是特殊的词语，如`alibaba` `taobao` 否则不要用拼音 。错误：`youxi`  ` v1` `v2` `v3` 。
* 变量命名采用首字母小，单词间用`-`分割的形式，如`is-node` `test-value`, 错误示范：`test_value` `testValue`
* 方法命名与变量一致
* 方法名需要加注释