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 引入的。

作者：SmallTeddy

链接：https://blog.csdn.net/SmallTeddy/article/details/109714427

来源：CSDN
著作权归作者所有，转载请联系作者获得授权，切勿私自转载。