cnpm,vue,vuex,animate,ui,echart,git,ts,vue3.0,react,swiper，数据库的npm命令以及使用

最新推荐文章于 2022-11-16 09:08:21 发布

qingxingya

最新推荐文章于 2022-11-16 09:08:21 发布

阅读量584

点赞数 2

分类专栏：命令文章标签： npm

本文链接：https://blog.csdn.net/qingxingya/article/details/111655997

版权

命令专栏收录该内容

1 篇文章 0 订阅

订阅专栏

cnpm安装------day05

cnpm比起npm安装的更快

1、检查电脑中是否有cnpm
cnpm -v
2、如果没有cnpm的话就安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、检查是否有cnpm了
cnpm -v
4、配置环境变量
找到nodejs\node_global这个文件添加到环境变量path当中
C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm

vue脚手架安装 -----day04

安装2.0版本
cnpm i @vue/cli-init -g
// 全局安装webpack
npm i webpack -g
// 全局安装vue脚手架
npm i vue-cli -g
// 创建项目
vue init webpack 项目名
// 进入项目
cd demo
// 启动项目
npm run dev
//打包命令
npm run build

Npm i 把package.json 里的配置项目自动下载

//安装路由----day06
Install vue-router? (Y/n) Y

vue3.0 -----day16

1、安装脚手架
//查看当前版本
vue --version
//卸载vue2.x
cnpm uninstall vue-cli -g
//安装
cnpm i @vue/cli@3.0.0 -g
//查看当前版本
vue --version
//创建项目
@3版本以上的：vue create demo
@2版本的：vue init webpack 项目名
//运行项目 npm run serve
1.1安装过程
1、选择配置项。①默
认的②自己配置。选择②
2、选择自己需要的东西。②ts④router⑤vuex
3、是否类定义组件Y
4、是否需要ts语法Y
5、history路由模式n
6、配置项放到哪里。package.json
7、每一次是否都是上面这些配置n
8、是否使用淘宝镜像y

创建2.x版本项目
cnpm i @vue/cli-init -g
vue init webpack demo

vuex 仓库 day08

https://vuex.vuejs.org/zh/
vuex:状态管理模式
//安装
cnpm i vuex --save
//使用
import Vue from 'vue'
import Vuex from "vuex"
Vue.use(Vuex)

安装animate.css day03

//安装
npm i animate.css --save
//2、引入

<link rel="stylesheet" href="./node_modules/animate.css/animate.cs
s">

//3、使用

<transition enter-active-class="animate__animated animate__bounceInDown"
leave-active-class="animate__animated animate__bounceOutRight">
</transition>

UI库 ------day09

PC端

elementui 饿了么(推荐)

1、官网
https://element.eleme.cn/#/zh-Cn
//安装
npm i element-ui --save
//引入

import ElementUi from "element-ui"
import "element-ui/lib/theme-chalk/index.css"
Vue.use(ElementUi)

移动端

mintui 饿了么(不推荐)

官网：http://mintui.github.io/#!/zhcn

vant(推荐)

官网：https://vantcontrib.gitee.io/vant/#/zhCN/
cnpm i vant --save
引入项目中在main.js中
import VantUI from ‘vant’
引入css

Import ‘vant/lib/index.css’
Vue.use(VantUI)

使用：
有一些属性看tabbar 
比如：active-color：选中的颜色
Inactive-color:未选中的颜色
：Route=true
<van-tabbar v-model=’active’ route active-color=’red’ inactive-color = ‘green’>
<van-tabbar-item icon=’wap-home-o’ to=’/index/home’>首页</van-tabbar-item>

echarts-------day14(可视化工具)

官网：https://echarts.apache.org/examples/zh/index.html#chart-type-pie
安装方式：npm install echarts --save

hightcharts

官网：https://www.highcharts.com.cn
安装方式：npm install highcharts --save

安装git -------------day14

选择你喜欢的盘符，傻瓜式安装
2、github
官网：https://github.com
注册—>登录
3、github创建仓库
1、点击右上角+，New repository
2、输入仓库名称，描述，创建
在这里插入图片描述

4、将项目添加到本地仓库
在你的项目中右击—>git bash here
git init
git add . //添加所有文件
git commit -m “你本次做了哪些事”
//如果是第一次使用git，需要配置一下个人信息
git config --global user.email “11@qq.com”
git config --global user.name “名字”
5、连接远程仓库
git remote add origin https://github.com/lirupeng/aaa.git
git remote add [仓库别名] 仓库地址
6、推送到远程仓库
git push -u origin master
git push -u [仓库别名] master
-u: 在以后提交的时候不用写完整命令只需写 git push
询问你的github账号和密码

7、作为一名新员工，down项目
git clone [仓库别名] https://github.com/lirupeng/aaa.git
8、下班
git add .
git commit -m “你今天做了哪些是事”
git pull // 如果一旦发生变化，那么就需要重新add commit pull
git push
9、上班 git pull

老师的笔记在git上。建立一个文件夹专门放你所要的资料
右击选中Git Bash Here
第一次安装直接输入：
git clone https://gitee.com/qqcloud/bj-web-0810.git
以后的下载要在跟目录的下级 C:\Users\Administrator\Desktop\第五阶段（2）\bj-web-0810
git pull

Ts

js是一门弱类型的面向对象的语言
typescript是JavaScript的超集。ts主要扩展了数据类型和面向对象的内容。ts是微软开发的
ts最终要被编译成js
//安装
npm i typescript -g
//编译
tsc demo.ts
//自动编译
1、生成配置tsconfig.json文件
tsc --init
2、创建了一个src文件夹和dist文件夹（src文件夹用来写ts，dist文件夹用来输入js）
3、配置tsconfig.json文件

{
  "compilerOptions": {
    "outDir": "./dist"
  },
  "include":["./src"]
}

4、开启自动编译
tsc -p tsconfig.json -watch

react

//安装脚手架
cnpm i create-react-app -g
//创建项目
create-react-app demo
//进入项目
cd demo
//启动项目
npm start

//浏览器输-------- localhost:3000
//在vscode中输入rcc 组件自动补全代码

//在做react项目时，有时候需要将后台传过来的html的字符串变成真正的结构渲染到页面，如果直接插入的话页面显示的就是这段字符串，而不会进行转义，可以用以下方法插入，便可以html的形式展现：

<div dangerouslySetInnerHTML={{__html: "<p>这里是自己要渲染的数据内容</p>"}} />

react中使用swiper

方法一：

转载：https://blog.csdn.net/weixin_43486426/article/details/107242500?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

本次的swiper的配置基于3.4.2版本的swiper包

1、首先安装swiper3.4.2版本
npm i swiper@3.4.2 -s

这时候你会发现你的node_modules里面多了一个swiper包，如果你已经安装过其他的swiper，请先卸载
2、如果你的swiper里面轮播的内容是静态的，也就是死数据的话，new swiper可以放在组件componentDidMount周期里面

componentDidMount(){
    new Swiper ('.swiper-container',{
    autoplay:1000,
    loop: true
    })
  }

如果你的资源，会更新，是后期获取的，那么你的new swiper应该写在组件的componentDidUpdate 里面，这样的话，可以更新swiper，避免出现不轮播，效果出不来的情况

componentDidUpdate(){
    new Swiper ('.swiper-container',{
      autoplay:2000,
      loop: true
      })
  }

3、swiper的引入和挂载
引入：

import Swiper from "swiper/dist/js/swiper"
import "swiper/dist/css/swiper.css"

这两个文件是在你写swiper组件里面引入的，一个是js,一个是css,
如果引入出错，你可以查看你的node_modules 里面是否有swiper包，包里面的目录是否和引入一致
挂载：

<div className="swiper-container">
              <div className="swiper-wrapper">
                {this.state.banner.map((items,imgs_index)=>{
                    return (
                    <div className="swiper-slide" key={items.banner_img}>
                        <img src={items.banner_img}  alt=''></img>
                  </div>
                  )
                })}
           </div>
</div>

方法二：

1.安装
npm install swiper --save
目前版本是 ^6.3.5

2.这个版本在引入css样式的时候和之前版本引入路径不同：
之前版本：import “swiper/css/swiper.css”
现在版本：import ‘swiper/swiper-bundle.min.css’

2.打开swiper官网
按流程使用

 <div className="swiper-container">
    <div className="swiper-wrapper">
       <div className="swiper-slide ">slider1</div>
       <div className="swiper-slide ">slider2</div>
       <div className="swiper-slide ">slider3</div>
    </div>
 </div>

componentDidMount () {
    //可以加上你需要的条件等，然后生成Swiper对象，
    //一定要检查是不是每次都生成了Swiper对象，否则可能出现不滑动的情况和别的情况等
   new Swiper('.swiper-container', {
     loop: true, // 循环模式选项
     autoplay: true, //自定轮播
   })
 }

vscode快捷键

alt+shift+a 多行注释

数据库

登录时 cmd
mysql -u root -p
项目上线后
mysql -h 127.0.0.1 -u root -p

在本地登录时可以省略-h,项目上线后，不可以忽略-h
创建一个数据库
create database 数据库名字
查看当所有的数据库
show databases
选择一个库
use web810
创建一个库
create table 表名 name (列名数据类型字段属性列名数据类型字段属性)
查看所有的表
show tables
查看创建表的信息
show create table (user)
查看表的结构信息
desc 表名
删除一个表
drop table 表名
删除一个库
drop database 库名