从零开始安装node.js以及vue-cli4.0创建项目

安装node以及vue-cli4.0创建项目

我是一个做C#后端的新手小白，最近在学习vue，由于老是记不住，我就来记录一下这个过程

一、安装node.js

1.安装vue脚手架之前，首先要安装vue推荐的使用环境node.js

在Windows上安装Node.js，官网下载地址：
http://nodejs.cn/download/
注意：安装路径最好不要带汉字和空格 安装完成之后，验证是否安装成功，可以使用 node –v 命令来查看版本

2.更改镜像

默认的npm比较慢，推荐安装淘宝的镜像：
使用命令：

npm install -g cnpm   --registr=https://registry.npm.taobao.org  

执行成功之后我们就可以使用 cnpm 了

二、安装vue脚手架

1.vue的环境装好之后，开始安装vue cli脚手架

注意：（此安装都会默认安装在C盘目录下，若想自己修改安装路径 ，请查找资料）
安装了淘宝镜像可以使用

cnpm install –g  @vue/cli

未安装淘宝镜像请使用

npm install –g @vue/cli

使用以上命令安装的都是最新版本vue脚手架，指定安装版本使用： cnpm install –g @vue/cli@版本号

2.查询vue是否成功安装

等待安装完成后，可以使用 vue –V 可以查看安装的vue版本，来检测是否安装成功

三、使用脚手架创建项目

1.创建项目

注意：可以使用vue ui图形化的方式创建项目 可以看看这位大哥使用 vue ui的方式创建项目，感觉还可以；
访问地址： https://blog.csdn.net/weixin_43417252/article/details/103730475
首先创建一个空白文件夹，切换到此文件夹目录

使用vue create 来创建项目
（不知道前面的淘宝镜像是不是还需要什么配置，这里第一次会问我是否选择淘宝镜像，我这里选择了是）

vue create 你的项目名称

vue create vue-test

我选择的是自定义配置

2.选择配置

勾选自己需要的配置（下面是勾选了我自己需要的配置）：
注意：按空格键是选中，不要按回车键，勾选完再使用回车键下一步

这里会询问你路由的模式，我选择的是默认

配置勾选的不同，后面会具体询问你的操作

3.css预编译

选择CSS预编译，根据需要自己选择，我选择的是 Sass/SCC(with node-sass)

4.生成配置文件

In dedicated config files ——为每个配置生成单独的配置文件
In package.json ——全部配置放到一个配置文件

5.保存模板

询问是否保存当前的配置模板（保存后方便下次直接使用此前选用的配置）

注意：如果没有保存模板则忽略这一步
为此配置创建一个名称

6.漫长的等待

剩下的就是一个漫长的下载的过程了

7.安装出错

在安装sass的时候，可能会因为当前网络环境的问题导致出错

安装出错了

可以在安装sass的还没有报错的时候，按（ Ctrl+C）终止操作；

8.解决出错

注意：已经步入到安装出错了的过程，以下操作也适用

终止安装后及出错后，打开项目文件夹， 删除node_modules文件夹

控制台定位到当前项目文件夹，输入 cnpm i ，重新下载依赖配置

cd .\vue-test

等待下载完成后，项目就搭建成功啦！！！

四、运行项目

1.启动项目

下载完成之后，在当前项目文件夹路径下输入

cnpm run serve

启动成功会显示这个样子

在浏览器输入以上地址回车运行项目

http://localhost:8080/

当看到显示以下页面，表示项目已经启动成功了

至于要用什么编辑器打开项目，就看自己的啦啦啦啦啦


教程已写成Word文档，需要进入我的主页下载。

结语

到这里，整个笔记就结束啦；本人也是一个新手小白，很多写的不好，可能在上面也写的有错误的地方请多多包涵，欢迎指点不足之处！！！！