前端指令大全 (持续补充中)

git的初始配置

配置git的用户名和登录密码
>> $ git config --global user.name "Your Name"
>> $ git config --global user.email "email@example.com"

vue阶段

vue2

1、全局安装vue-cli

>> yarn global add @vue/cli 或 npm i -g @vue/cli 

2、创建项目

>> vue create 项目名 

3、进入项目目录，启动项目

>> yarn serve 或 npm run serve

vue2的项目目录详解

一级目录:

 node_modules       //>> 依赖的第三方模块
 public             //>> vue服务器静态文件目录，只有唯一的一个index.html
 src                //>> 我们的开发目录，最重要的目录，源文件（我们写的代码）目录
 .gitignore         //>> git忽略列表
 babel.config.js    //>> es6编译配置
 package-lock.json  //>> 包描述文件（记录更详细，记住当时的版本信息）
 package.json       //>> 包描述文件
 README.md          //>> 说明文档

二级目录:

src：
    assets          //>> 静态资源 styles images fonts
    components      //>> 组件,是.vue的文件,主要是公用的小组件
    views           //>> 页面级别的组件
    App.vue         //>> 整个应用的顶级组件.
    main.js         //>> 入口文件

备注：
需要安装vetur插件，支持vue代码高亮显示。
安装 Vue VSCode Snippets，写vue起飞！！！

快捷操作

>>vbl(快速搭建框架(vbase),样式是less)
>>vbs(快速搭建框架(vbase),样式是css)
>>vba(快速搭建框架,样式是scss)

vue3

快速搭建项目步棸

1.创建项目

>> yarn create vite 或者 npm create vite@latest(固定写法)

2.安装路由

>> yarn add vue-router@4 (安装vue3路由)

3.安装样式

>> yarn add sass sass-loader -D(安装的样式)

4.安装element-plus

>> yarn add element-plus 或者 npm install element-plus --save

5.安装 pinia

>> yarn add pinia 或者 npm install pinia

自定义创建项目

自定创建选项: 
1.yes(ts) 
2.no(jsx) 
3.yes(router) 
4.yes(pinia)
5.no(vitest) 
6.no(end-to-end) 
7.yes(eslint) 
8.no(prettier)

React

1.全局安装脚手架

>> yarn global add create-react-app（脚手架只需要安装１次）

2.使用脚手架搭建项目

>> create-react-app 项目名

3.启动测试

>> cd 项目名 && yarn start

TypeScript

1.安装TS

>> npm install typescript -g 或者 yarn global add typescript

2.安装ts-node测试编译运行ts

>> npm install ts-node -g  或者  yarn global add ts-node

3.vscode安装.run插件 (Code Runner)

4.初始化

初始化tsc --init   单个编译 tsc index.ts 根据配置文件编辑 tsc

淘宝镜像

1.npm淘宝镜像

npm config set registry https://registry.npm.taobao.org/

2.npm官方镜像

npm config set registry https://registry.npmjs.org/

3.yarn淘宝镜像

yarn config set registry https://registry.npm.taobao.org/

4.yarn官方镜像

yarn config set registry https://registry.yarnpkg.com/

ElementUI安装

>>yarn add element-ui 
>>npm i element-ui 

安装echarts

>> yarn add echarts

安装Vant-ui

vue2>>>>>
>> yarn add vant@latest-v2
vue4>>>>>
>>npm i vant 或者 yarn add vant
手机查看>> yarn dev --host

uView安装

>> yarn add uview-ui@2.0.31 -S  ||  npm i uview-ui@2.0.31 -S
1 引入uView主JS模块  main.js中，注意这两行要放在import Vue之后
// main.js
import uView from "uview-ui";
Vue.use(uView);

2 引入uView全局SCSS主题文件 uni.scss
/* uni.scss */
@import 'uview-ui/theme.scss';

3 引入uView主样式 在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>

4 配置自动引入组件模式 pages.json
// pages.json 放在最上边
{
    "easycom": {
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },
    // 此为本身已有的内容
    "pages": [
        // ......
    ]
}
uView组件文档： https://www.uviewui.com/components/intro.html

安装滚动插件(手机端)

>> yarn add better-scroll@1.11.1 -D

vant4安装

1.安装

>>yarn add vant
>>npm i vant

2.按需引入

通过 npm 安装
>>npm i unplugin-vue-components -D
通过 yarn 安装
>>yarn add unplugin-vue-components -D

3.配置

如果是基于 vite 的项目，在 vite.config.js 文件中配置插件：

import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

如果是基于 vue-cli 的项目，在 vue.config.js 文件中配置插件：
const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()],
      }),
    ],
  },
};

在main.js中引用需要的组件

//按需引入vant-ui组件
import { Button, Rate } from 'vant';
import 'vant/lib/index.css';
Vue.use(Button).use(Rate);

ant Design Mobile(手机端)

安装

>>npm install --save antd-mobile  或者  yarn add antd-mobile

图标是在一个单独的 npm 包中，如果你想使用图标，需要先安装它

>> npm install --save antd-mobile-icons  或者  yarn add antd-mobile-icons

使用时从这个包中引入你所需要的图标即可：

import { AntOutline } from 'antd-mobile-icons'

使用:
  <AntOutline fontSize={12} color='#76c6b8' />