Vue脚手架安装 与 Vue项目创建运行、vue项目迁移后运行失败问题

目录

Vue脚手架安装

vue 如何查看vue cli的安装位置

Vue项目创建与运行

1.创建项目

2.运行项目

3.检测运行是否成功

 项目文件作用介绍

快捷安装项目所需依赖 命令 npm i

---

Vue脚手架安装

首先：vue脚手架安装、插件包安装、插件管理都需要cmd命令

1. 通过windows键+R  打开运行窗口
2. 输入cmd  进入cmd控制台

切换盘符选择安装位置:(方便小白安装位置查找）

     c: 切换到c盘

     d: 切换到d盘

为保证安装效率可安装淘宝镜像

设置镜像：

npm config set registry https://registry.npmmirror.com

nodejs的下载路径：https://nodejs.org/en/download/

在确保已安装Node.js的情况下输入安装Vue脚手架 （注意空格等书写问题）

npm i @vue/cli -g

检测nodejs与npm指令是否安装成功

node -v        显示安装的nodejs版本
npm -v        显示安装的npm版本
vue --version  显示vuecli版本号

结果：（显示版本号即为成功）

vue 如何查看vue cli的安装位置

1. cmd——执行where vue.
2. 如果你配置过npm的下载路径，那么vuecli就会被下载到你配置的路径中。
3. 如果没有配置npm的下载路径，那么vue就会被下载到系统用户目录下

cmd 中 输入path 回车 可以查看所有环境变量中安装的路径，如svn.exe的安装路径。

Vue项目创建与运行

1.创建项目

2.运行项目

运行命令也可设置为npm run dev

方法：将运行项目时的npm run serve 改为npm run dev需要改package.json里的代码

将此处改为dev即可

3.检测运行是否成功

 复制上方地址后浏览器中打开，即可看到下方页面

 此时项目即创建并运行成功

 项目文件作用介绍

快捷安装项目所需依赖 命令 npm i

一般我们在进行项目复制分享时，并不会将node_modules文件也进行发送，就会导致插件丢失，造成报错，无法顺利运行项目，为避免单独下载每个插件，可使用 npm i 命令来安装项目中已安装过的插件，使项目顺利运行。