vue前端开发准备

相关环境配置：

1.下载并配置git bash

Windows下的Git Bash配置

2.下载ndoejs：

注意的坑：1.修改模块安装和缓存路径 2.配置环境变量 3.更改npm的镜像以及安装cnpm

参考博客：[node的安装与配置](<https://blog.csdn.net/qq_40593308/article/details/110559838#:~:text=Nodejs环境变量配置&gt; Nodejs默认模块安装路径和缓存路径均在C盘 (C%3AUsers你的用户名 (Administrator)AppDataRoamingnpm和C%3AUsers你的用户名 (Administrator)AppDataLocalnpm-cache)

下面汇总关于node的常用指令：

//查看node版本号
node -v
//查看npm的版本号
npm -v
//查看当前安装模块的路径
npm config get prefix
//查看当前缓存的路径
npm config get cache
//设置(更改)安装模块的路径
npm config set prefix "绝对路径"
//设置(更改)缓存的路径
npm config set cache "绝对路径"
=======================cnpm的各指令同npm===========================
//更换npm源
npm config set registry https://registry.npm.taobao.org
//查看当前npm源
npm config get registry

3.vue相关

之前只用过vue2，使用起来只需要下载一个js文件即可使用大部分特性

而到了vue3，其有了更加丰富的生态，需要的js文件也变多了：UNPKG - vue

所以vue3提供了许多生态，帮我们去简化开发，管理依赖

vue生态简介：

1.vue/cli

是一个交互式的项目脚手架。

提供了全局安装的npm包，提供了终端里的 vue 命令。

它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。

你也可以通过 vue ui 通过一套图形化界面管理你的所有项目

下载vue/cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

下载了这个脚手架后，就可以通过一个可视化的界面，管理本地的vue项目，也可以可视化的下载依赖和插件，也可以管理生产和开发环境的打包

//启动vue可视化管理界面
vue ui

2.vuex:

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

人话说就是管理js的全局

下载vuex

npm install vuex@next --save
yarn add vuex@next --save

3.Vue Router

vue的路由管理模块

下载vue router

npm install vue-router@4
# OR
yarn add vue-router@4

vue项目开发规范

在写过很多项目后，我始终在思考一些问题：

1.在经历过很长时间的算法训练后，我们写具体需求的能力应该已经很强了；但是当我们想写一个项目时，无法下手

2.提升项目能力的最好办法就是"抄"；但是当我们阅读一些开源项目时，还是很难进行

3.造成这个问题的原因是：我们往往不知道"实现某个功能的具体代码在哪个文件中"

所以在写项目之前，了解一个项目是如何构建的，如何分的模块，其实是一个我们一直忽视，却又及其重要的一个点

一个企业级vue项目的项目结构

├── build                      // 构建相关  
├── bin                        // 执行脚本
├── public                     // 公共文件
│   ├── favicon.ico            // favicon图标
│   └── index.html             // html模板
│   └── robots.txt             // 反爬虫
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── layout                 // 布局
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── utils                  // 全局公用方法
│   ├── views                  // view
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   ├── permission.js          // 权限管理
│   └── settings.js            // 系统配置
├── .editorconfig              // 编码格式
├── .env.development           // 开发环境配置
├── .env.production            // 生产环境配置
├── .env.staging               // 测试环境配置
├── .eslintignore              // 忽略语法检查
├── .eslintrc.js               // eslint 配置项
├── .gitignore                 // git 忽略项
├── babel.config.js            // babel.config.js
├── package.json               // package.json
└── vue.config.js              // vue.config.js