Web前端开发工具和依赖安装

各种安装:

node.js

https://nodejs.org/zh-cn/

安装完node.js 可以使用npm,npm跟随nodejs一起安装

powershell 复制代码
node --version  查看已安装node.js的版本,确认是否安装nodejs
npm -v 查看npm版本

npm install <Module Name> 安装模块
npm install -g <Module Name>    加-g全局安装<>模块

npm init vite@latest xxx(project name)  快速创建前端项目

npm run dev 启动

修改镜像源

修改镜像源为淘宝镜像:输入以下命令并回车

powershell 复制代码
npm config set registry [https://registry.npmmirror.com](https://registry.npmmirror.com)

修改镜像源为腾讯镜像源:输入以下命令并回车

powershell 复制代码
npm config set registry [http://mirrors.cloud.tencent.com/npm/](http://mirrors.cloud.tencent.com/npm/)

修改镜像源为华为镜像源:输入以下命令并回车

powershell 复制代码
npm config set registry [https://mirrors.huaweicloud.com/repository/npm/](https://mirrors.huaweicloud.com/repository/npm/)

pnpm 安装

速度快、节省磁盘空间的软件包管理器

powershell 复制代码
npm install -g pnpm

scss

css预处理语言, 样式

安装:

powershell 复制代码
  npm install sass --save

Element Plus

安装:

powershell 复制代码
  npm install element-plus --save

使用:

ts 复制代码
import ElementPlus from 'element-plus'  导入element-plus包
import 'element-plus/dist/index.css' 导入样式

createApp(App).use(ElementPlus).mount('#app')  使用

路由的配置

作用:URL地址和页面的适配

安装命令

powershell 复制代码
npm install vue-router@next --save

使用步骤:

1安装路由包

2新建页面

示例代码:

ts 复制代码
import {createRouter,createWebHistory} from 'vue-router'
import HomePage from "./views/HomePage.vue"
import LoveFlower from "./views/LoveFlower.vue"  
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: HomePage },
    { path: '/loveflower', component: LoveFlower },   ],
})
export default router

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库

安装:

powershell 复制代码
npm install vuex --save

使用:

  1. src目录下新建文件夹vuex,新建文件index.ts
  2. main函数里导入
ts 复制代码
import store from './vuex/index
  //挂载vuex
  app.use(store)

ecahrts

安装

powershell 复制代码
npm install echarts --save

教程官网:

https://echarts.apache.org/zh/index.html

axios

axios拦截器

安装

powershell 复制代码
npm install axios --save
相关推荐
未来之窗软件服务1 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友1 小时前
什么是断言?
前端·后端·安全
FIN66682 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4952 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1242 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树2 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN66682 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能
im_AMBER2 小时前
杂记 14
前端·笔记·学习·web
牧杉-惊蛰3 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
C+ 安口木3 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js