Vue项目的创建启动及注意事项

这里我们开始学着启动一个vue项目：

一、安装Nodejs

这里不详细介绍node的安装方法，可参考：前端系列：Node.js安装与配置（详细步骤）_node安装教程-CSDN博客

安装后可见的文件内容

在最后需要将默认的镜像更改为国内镜像（以前的淘宝镜像有时候有的人不能用了，比如我就是不能用那个）

# 设置npm源为淘宝镜像 npm config set registry https://registry.npmmirror.com/

*！！*记住，不要用网上一些视频或者博客写的npm config set registry https://registry.npm.taobao.org 这个会给你报错的

安装完成，镜像配置好了之后就：管理员命令行输入 npm config get registry

如果返回https://registry.npmmirror.com/  那就是对的了。

其他都按照上面链接里面做就行。

下面就开始正式的做vue项目了

二、正式开始创建vue项目

1. 创建一个文件夹用来存放你的所有Vue工程项目，这样比较好管理
2. 点击上方输入框输入cmd进入命令行
3. 
4. 命令行输入：npm init vue@latest       注意，在命令行里面如果报错那就是你的nodejs配置有些问题（安装时未勾线配置环境变量）这里就是完全正确的操作了，
5. 下面你就需要按照他的提示进行完成一些项目配置了：第一次创建项目时你只需要一直按Enter就行了，其他可以先不管。
6. 在命令行一次输入以下三条命令（你别傻傻的输了我的了，让我来看看是谁输的是我的！！！）

7. cd MySecondVue
   npm install
   npm run dev

   随着你输入完npm run dev 后你会看到

8. 这个时候你  代表你的vue项目就完完全全的成功的创建好了，高兴吗？你可以返回你的文件夹去你项目最外层复制整个文件粘贴到VSCode打开                                             这个图相信对你的用处不小【坏笑坏笑】

9. 

三、注意事项：

• 启动vue项目时应该到工程文件内进入命令行然后“npm run dev”进行启动
• 在VSCode里面启动vue项目时当我们按下“ctrl+s”后，会自动重启服务器更新内容；如果在命令行需要输入“r”  按下 Enter，有点麻烦，所以推荐在VSCode里面进行vue项目的启动。【如何在VSCode里面启动vue项目呢？】【答：点击打开视图里面，可以看见“npm脚本” 打开就行了然后找到项目文件夹进入，在左下角看见npm脚本，然后点“dev”后面的启动符号，进行项目启动，启动成功后，窗口“终端”就会显示与在命令行启动时相同的字样，然后你每次保存代码后其会自动更新（就相当于热部署）了】

最后给大家总结以下在node操作vue项目时常用的命令行吧：
 

npm - v 检查是否安装成功

npm config setregistry http://xxx.xxx.org 设置当前镜像为“http://xxx.xxx.org”

npm config get registry 获取当前镜像（当设置完镜像后执行此语句查看是否设置完成）

npm init 会引导你创建一个package.json文件

npm install express 安装express

npm install xxx --save 安装依赖（例如：npm install axios）

npm show express 显示模块详情

node xxx.js 运行node项目

nodejs官网：下载 | Node.js 中文网

全局安装webpack

命令行 ：	    npm install webpack -g

全局安装脚手架（vue-cli）

命令行	  ：npm install -g@vue/cli

 
// 检查是否成功
vue --version

全局安装nodemon

命令行	  ：npm i -g nodemon

cls：清屏（命令行通用）

ctrl+c:退出服务（命令行通用）

 cd  绝对路径：进入到绝对路径位置

---

感谢阅读，怕忘了就收藏了吧。