前端环境搭建
Node_js安装
下载Node.js
安装Node.js
| 选项 | 说明 |
|---|---|
| Node.js runtime | 表示运行环境 |
| npm package manager | 表示npm包管理器 |
| Online documenttation shortcuts | 在线文档快捷方式 |
| Add to PATH | 添加到环境变量 |
是否安装成功
- cmd 输入 node -v 有版本号代表成功
环境变量出现错误
npm全局环境变量配置
- 我的电脑->右键->属性->高级系统设置->高级->环境变量
- 选中Path，点击编辑
3.点击新建，将node安装目录追加到path里
- 完成后在 cmd 中输入 node -v 再次验证
查看npm源
powershell
npm get registry
查看npm版本
powershell
npm -v
全局安装cnpm
powershell
npm install -g cnpm --registry=https://registry.npm.taobao.org
查看cnpm版本
powershell
cnpm -v
切换官方源
powershell
npm config set registry http://www.npmjs.org
切换淘宝源
powershell
npm config set registry http://registry.npm.taobao.org
vue-cli3.0
全局安装最新稳定版vue
powershell
npm install -g vue
全局安装最新vue-cli
powershell
npm install @vue/cli -g
全局查看vue版本号
powershell
npm info vue
局部（当前项目）查vue版本号
powershell
npm list vue version
项目文件package.json查看vue版本
json
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.4",
"echarts": "^4.7.0",
"element-ui": "^2.13.1",
"js-cookie": "^2.2.1",
"vue": "^2.6.11", //此处为vue2版本的显示
"vue": "^3.0.0", //此处为vue3版本的显示
"vue-calendar-component": "^2.8.2",
"vue-router": "^3.1.6"
}
全局卸载vue-cli
powershell
npm uninstall vue-cli -g
查看vue-cli版本号
powershell
vue -V
创建项目
powershell
vue create 项目名
- 选择默认 Vue2 或者 Vue3
初始化项目
powershell
npm init -y
运行项目
powershell
npm run dev
第二种运行方法
powershell
npm run serve
- 如果不行先全局安装 nodemon
powershell
npm i -g nodemon
- 然后在项目文件 package.json中设置启动项
json
"scripts": {
"dev": "vue-cli-service serve",
"serve": "nodemon index.js", //此处为设置的启动项
"build:test": "vue-cli-service build --mode test",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
引入ElementUI
进入需要安装的项目文件夹
powershell
cd 项目文件夹
vue add element
选择需要的选项
安装路由
powershell
vue add router
