前端vue搭建

1.找一个合适的模板,可以用vue-element-admin的模板,但是个人认为这个模板太大了,做小项目修改起来比较复杂,可以找一个比较小的项目 2.我找的项目git clone https://github.com/tuture-dev/vue-admin-template.git,这个下载需要先按照git

添加图片注释,不超过 140 字(可选)

360软件安装管家里面直接搜索git,下载安装 然后在下载目录右键打开git bash,输入git clone xxx命令即可

添加图片注释,不超过 140 字(可选)

3.安装npm 3.1首先需要下载node.js,一般下载推荐的版本就行https://nodejs.org/en 3.2安装,按照默认的步骤安装就行,记得把安装目录修改为非C盘 3.3验证,在cmd窗口输入node -v,出现版本即为安装成功

添加图片注释,不超过 140 字(可选)

3.4输出npm -v,出现npm的版本

添加图片注释,不超过 140 字(可选)

4.在上面下载的模板目录输入cmd进入项目目录

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

5.开始配置vue环境,输入npm install

添加图片注释,不超过 140 字(可选)

6.bug解决,我的出现了下面的一堆错误,没有出错的跳过

添加图片注释,不超过 140 字(可选)

删除项目中的 node_modules文件夹和package.json里面dependencies里面的nass相关的两行(node-sass和sass-loader) 重新执行npm install 我每次搞这个搞半天,很多次放弃vue都是因为这个环境真的太难配置了 7.执行npm run dev 又出现下面的的一堆错误,麻了

添加图片注释,不超过 140 字(可选)

按照下面的链接里面的步骤去配置一下SSL(nodejs报digital envelope routines::unsupported错误的最新解决方法_node.js_脚本之家) 主要就是配置下面这个环境变量和package.json里面

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

复制代码
复制代码

"serve": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve", "build": "set NODE_OPTIONS=--openss1-legacy-provider & vue-cli-service build",

8.删了nass里面会报下面的错误

添加图片注释,不超过 140 字(可选)

执行下面的命令

复制代码
复制代码

npm rebuild node-sass npm update

添加图片注释,不超过 140 字(可选)

感觉还是不行 删掉node_module,重新执行npm install 终于好了,泪目┭┮﹏┭┮

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

只有两个导航栏,挺简洁的

相关推荐
跳动的梦想家h33 分钟前
环境配置 + AI 提效双管齐下
java·vue.js·spring
Mr Xu_1 小时前
Vue 3 中 watch 的使用详解:监听响应式数据变化的利器
前端·javascript·vue.js
一 乐2 小时前
校园二手交易|基于springboot + vue校园二手交易系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端
科技D人生2 小时前
Vue.js 学习总结(20)—— Vue-Office 实战:word、pdf、excel、ppt 多种文档的在线预览
vue.js·word·vue-pdf·stylesheet·docx-preview·vue-office
vx1_Biye_Design2 小时前
基于Spring Boot+Vue的学生管理系统设计与实现-计算机毕业设计源码46223
java·vue.js·spring boot·spring·eclipse·tomcat·maven
vx_Biye_Design2 小时前
基于Spring Boot+vue的湖北旅游景点门票预约平台的设计--毕设附源码29593
java·vue.js·spring boot·spring cloud·servlet·eclipse·课程设计
hedley(●'◡'●)2 小时前
基于cesium和vue的大疆司空模仿程序
前端·javascript·vue.js·python·typescript·无人机
qq5_8115175152 小时前
web城乡居民基本医疗信息管理系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】
前端·vue.js·spring boot
百思可瑞教育2 小时前
构建自己的Vue UI组件库:从设计到发布
前端·javascript·vue.js·ui·百思可瑞教育·北京百思教育
百锦再2 小时前
Vue高阶知识:利用 defineModel 特性开发搜索组件组合
前端·vue.js·学习·flutter·typescript·前端框架