一、安装Node.js以及配置环境变量
1、Node获取地址
2、设置Node的配置内容
![二、搭建前后端分离的自动化测试平台的前端Vue3+Element-plus前端项目](https://imgs.yssmx.com/Uploads/2023/11/735951-1.png)
npm config set prefix "xxx\Node\node_global" npm config set cache "xxx\Node\node_cache"
npm config set registry=http://registry.npm.taobao.org //配置镜像站
npm config list //显示所有配置信息 检查一下镜像站行不行命令
npm config get registry
3、设置环境变量
NODE_PATH=xxx\Node\node_global\node_modules
xxx\Node
xxx\Node\node_global
xx\Node xx\Node\node_global
4、创建项目
(1)vue create test_platform (2)npm run server
5、如上的命令要在管理员下运行
6、其他查看命令
npm config list
npm config get registry
npm config get prefix
npm config get cache
(3)配置淘宝镜像文章来源地址https://www.toymoban.com/news/detail-735951.html
npm config set registry https://registry.npm.taobao.org
npm install -g cnpm --registry=https://registry.npm.taobao.org
二、Pycharm配置以及Vue相关
1、在pycharm中安装插件Vue.js
![二、搭建前后端分离的自动化测试平台的前端Vue3+Element-plus前端项目](https://imgs.yssmx.com/Uploads/2023/11/735951-2.png)
2、设置在pycharm中可以使用vue相关命令
(1)以管理员身份运行PowerShell (2)PS C:\WINDOWS\system32> set-ExecutionPolicy RemoteSigned (3)PS C:\WINDOWS\system32> A
3、创建&运行项目
4、其他
npm install vue-cli -g(安装2.x版本的脚手架)
npm install -g @vue/cli(安装vue3以上版本的脚手架)/npm install -g vue-cli@版本号/npm install -g @vue/cli@版本号
①创建项目 vue create (vue/cli3) vue init webpack appname(vue-cli2); ②启动项目 由npm run dev 改成 npm run serve; ③移除了配置文件目录 config 和 build 文件夹,如果需要自定义配置,需要自己新建vue.config.js文件; ④移除了 static 静态资源文件夹,新增 public 文件夹,静态资源转移到public目录中,通过/xx.xx可以直接访问,并且 index.html 移动到 public 中; ⑤在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件; ⑥安装项目时会自动下载node-model文件夹;
三、Vue项目结构说明
1、项目结构图
├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件 │ │ └── HelloWorld.vue │ │── App.vue: 汇总所有组件 │ │── main.js: 入口文件 ├── .gitignore: git版本管制忽略的配置 ├── babel.config.js: babel的配置文件 ├── package.json: 应用包配置文件 ├── README.md: 应用描述文件 ├── package-lock.json:包版本控制文件
2、配置文件参考
文章来源:https://www.toymoban.com/news/detail-735951.html
到了这里,关于二、搭建前后端分离的自动化测试平台的前端Vue3+Element-plus前端项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!