各种安装:
node.js
安装完node.js 可以使用npm,npm跟随nodejs一起安装
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 启动
修改镜像源
修改镜像源为淘宝镜像:输入以下命令并回车
npm config set registry [https://registry.npmmirror.com](https://registry.npmmirror.com)
修改镜像源为腾讯镜像源:输入以下命令并回车
npm config set registry [http://mirrors.cloud.tencent.com/npm/](http://mirrors.cloud.tencent.com/npm/)
修改镜像源为华为镜像源:输入以下命令并回车
npm config set registry [https://mirrors.huaweicloud.com/repository/npm/](https://mirrors.huaweicloud.com/repository/npm/)
pnpm 安装
速度快、节省磁盘空间的软件包管理器
npm install -g pnpm
scss
css预处理语言, 样式
安装:
npm install sass --save
Element Plus
安装:
npm install element-plus --save
使用:
import ElementPlus from 'element-plus' 导入element-plus包
import 'element-plus/dist/index.css' 导入样式
createApp(App).use(ElementPlus).mount('#app') 使用
路由的配置
作用:URL地址和页面的适配
安装命令
npm install vue-router@next --save
使用步骤:
1安装路由包
2新建页面
示例代码:
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 应用程序开发的状态管理模式 + 库
安装:
npm install vuex --save
使用:
- src目录下新建文件夹vuex,新建文件index.ts
- main函数里导入
import store from './vuex/index
//挂载vuex
app.use(store)
ecahrts
安装
npm install echarts --save
教程官网:
https://echarts.apache.org/zh/index.html
axios
axios拦截器
安装
npm install axios --save