前端Vue项目搭建过程概述

2024-05-13 19:12:08

1、安装node、npm

输入 node -v ，npm -v ，出现版本号即可。

2、安装vue

即 npm install vue ，输入 vue -V 报错，找到用户根目录
D:\Users\username\AppData\Roaming\npm

一般就是 AppData\Roaming\npm （若没有找到文件夹，打开查看隐藏文件夹这些设置）

总而言之，就是为了找到 vue.cmd 这个文件即可，将该路径设置为，环境变量设置 —> 系统变量 —> Path，编辑新增即可

运行 cmd 命令输入 vue -V 即可。

3、创建

可输入 vue create demo ，提示卸载原有的脚手架，安装最新的脚手架，
输入 npm uninstall -g vue-cli ，然后 npm install -g @vue/cli 即可

4、运行

运行文件夹cmd面板，vue create demo ，选择cli选择配置，建议选取 Babel ，PWA ，Router ，Vuex ，CSS Pre-processors ，这5个选项，
cd demo，npm run serve 即可

5、安装Element-UI插件

npm i element-ui -S ，引入 import ElementUI from 'element-ui' ; import 'element-ui/lib/theme-chalk/index.css';
使用Vue.use(ElementUI)；

6、简单优化

删除多余代码，留下基本结构保证不报错，在 components 里面新增 Login.vue 文件，作为登陆页面，去router 文件夹下的 index.js 文件修改路由，默认是指向主页 Home 组件，增加 path:/login ，在/的情况下 redirect:'/login' ，即先验证登陆，登陆完成才可以进入首页

7、引入

完成登陆页面的绘制，会出现，登录页面高度问题，根据F12查看，于src/assets/css/global.css全局样式表，给项目加上一个全局 html ，body ，#app{height:100%,padding:0,margin:0}
全局样式设置完，登录页面即可沾满整个页面，注意，全局样式表是在 main.js 里面 import 引入的。

前端Vue项目搭建过程概述相关推荐

后台管理系统-前端Vue项目搭建
后台管理系统简介从本章节开始我们将逐渐完成一套后台管理系统的搭建过程. 前端技术 Vue3.2 , 后端搭建使用Spring Cloud Alibaba. 1.Vue项目初始化我们使用Vue ui ...
vue项目搭建详细教程
1.下载node.js 下载地址:Download | Node.js 直接下一步下一步即可下载完成下载完成后,按住win+R,输入cmd回车查看node版本:node -v 查看npm 版本:n ...
SpringBoot+vue仿网易云音乐网站（三）- Springboot项目以及前端vue基础搭建
一.基础项目搭建 1. 新建springboot项目在搭建Springboot项目之前,需要的基础环境:JDK(8).Maven,工具Idea.项目就新建一个简单的springboot项目就行了,具 ...
Re：从零开始的Vue项目搭建
Re:从零开始的Vue项目搭建初始的终结与结束的开始 Nodejs项目的简单测试从零开始 webpack开发模式 webpack编译打包后记初始的终结与结束的开始最开始接触vue项目搭建是从 ...
Vue 项目搭建流程和使用大全
Vue 项目搭建流程及项目中遇到的问题项目搭建流程 1.使用vue cli 搭建项目框架 cnpm install -g vue-cli 安装vue cli 脚手架 vue init webpack ...
服务器上部署前端Vue项目代码
服务器上部署前端Vue项目代码本人自己感觉部署前端代码比部署后端难,主要是我在部署的过程中遇到了各种报错
node安装与环境搭建 + VUE项目搭建
一.node环境安装 1.node下载 node.js官网地址:Node.js LTS:表示稳定版一般用于生产环境,重点在于稳定,如果你需要稳定性并拥有复杂的生产环境(例如中型或大型企业),建议使 ...
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现 1.vue项目pdf展示 2.pdf工具栏放大缩小功能文章目录前端vue项目(使用pdf.js) pdf展示及pdf工 ...
Jenkins自动化部署前端Vue项目
Jenkins自动化部署前端Vue项目前言安装NodeJs 下载NodeJs 安装NodeJs npm配置 Jenkins配置NodeJs 安装NodeJs插件配置NodeJs 新建及配置任务 ...

最新文章

热门文章