Vue前端快速搭建:

1、工具下载:

2、node环境搭建:

  • 在下载的node包中,创建两个文档

    node_global

    node_cache
    在这里插入图片描述

  • 改变全局配置和缓存

    npm config set prefix "D:\softwares\node\node_global"
    npm config set cache "D:\softwares\node\node_cache"
    
  • 系统高级配置环境变量
    在这里插入图片描述

  • 下载全局安装

    npm install express -g     # -g是全局安装的意思
    
  • 下载Vue脚手架

    npm install -g @vue/cli
    
  • 查看下载是否成功

    node -v
    
    npm -v
    
    vue --version
    

3、搭建项目

  • 打开项目位置进入cmd:
    在这里插入图片描述

  • 下载框架

    vue create lzh_front
    # 选择箭头所指选项  手动配置
    

在这里插入图片描述

注意:如果报错 securityError:加入一下命令:

set-ExecutionPolicy RemoteSigned   
# 然后选择y
  • 空格选择所需要的
    在这里插入图片描述

  • 历史模式选择否
    在这里插入图片描述

  • 选择配置信息存储的位置——package.json
    在这里插入图片描述

  • 是否作为模板,以后去创建(这里先否)
    在这里插入图片描述

  • 开始创建项目
    在这里插入图片描述
    在这里插入图片描述

  • 启动,看看是否创建成功
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

  • 最终用idea打开查看文件目录
    在这里插入图片描述

4、安装Element UI(基于2.x的vue):

  • npm安装(在该项目根目录下进入cmd):

    npm i element -ui -S
    # -s表示将模块安装到目录以及插入相应的依赖中
    
  • 快速引入—进入main.js中加入一下代码:

    👉element官网

    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    
    Vue.use(ElementUI);
    

版权声明:本文为lzh623015455原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/lzh623015455/article/details/115557678