Vu2安装脚手架、创建项目以及库

Vue2

---

1、总结

Vue项目的创建

1. 先安装脚手架
2. 在创建项目

---

2、脚手架

2.1、安装

安装【了解】

• 安装指令: npm install -g @vue/cli
  • 指令意思：安装脚手架
  • install：安装
  • -g：全局
  • @vue/cli：Vue的脚手架

淘宝镜像【重要】

• 一般安装都比较慢，建议下载淘宝镜像之后在安装
  1. 淘宝镜像指令：npm config set registry http://registry.npm.taobao.org/
  2. 安装完淘宝镜像，由原来的npm指令变为cnpm指令，加快了安装速度
  3. 【淘宝镜像之前】: npm install -g @vue/cli
  4. 【淘宝镜像之后】：cnpm install -g @vue/cli

检查版本

• 安装完之后检查版本，看是否安装成功
  1. 指令：vue --version
     或者
  2. 指令（简写）：vue -V(大写的V)

---

2.2、卸载

介绍

• 卸载vue-cli( 脚手架 )
  1. 执行指令：npm uninstall vue-cli -g 或者：npm uni vue-cli -g
  2. 检查vue-cli写在卸载成功没
  3. 执行指令：vue -V 或者 vue --version
  4. 出现’Vue’不是内部命令，也不是可运行的程序，代表vue-cli卸载成功了

---

3、创建项目

介绍

【前提】：必须要先安装完教授架，才可以创建项目

1. 执行指令：vue create 项目名称
   • 注意：
     1. 该执行指令在指定的目录下创建项目【切记该指令不是全局命令】
     2. 项目名称最好是短横线命名，不要驼峰命名
   • 例子：vue create my-project

创建项目

• 在指定目录下输入指令：vue create my-project
• 然后如下图进行配置
  
• 图片最后有一个步骤没有补充：
  1. Save this as a preset for future projects?【保存为未来项目的预设】
     • 意思：保存起来下次直接可以创建，不需要在配置
     • y: 保存；n：不保存
  2. save preset as：【保存为】
     • 意思：自定义预设名称(vue2-base)
     • 演示: vue2-base ([Vue 2] less, babel)

---

3.1、如果项目已经存在再vue create

介绍

• 会出现： Pick an action【选择一个动作】
  1. OverWrite: 重写
  2. Merge：合并
  3. Cancel: 取消

---

4、库

Vue库

1. vue-router
   • 介绍：路由器库
   • 安装：在指定的项目文件夹路径下npm i vue-router@3.5 -S
2. vuex
   • 介绍：vuex仓库
   • 安装：在指定的项目文件夹路径下npm i vuex@3 -S

Vue快捷指令

1. npm i
   • 介绍：如果node_modules文件夹删除了，可以在指定项目文件夹路径下使用指令npm i即可写在node_modules

注意

1. Vue2使用的路由以及仓库都是4.0以下版本，不包括4.0

---