前后端开发—前端基础搭建

Vue前端快速搭建：

1、工具下载：

• idea
• node.js ：👉下载网站

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);