Vue超详细搭建

                    1：安装node.js和配置环境

1.1：打开官网Node.js    中文网Node.js 中文网

可以选择最新版本下载， 也可以选择Other download选择其他版本，再选择最下面第四个Previous Releases选择以前的版本。  

下载好后一路next就可以了

1.2：在下载好的文件夹中创建这两个文件存放信息

1.3：配置环境变量  打开高级系统设置 选择环境变量

然后选择新建输入NOED_PATH和nodejs的路径

然后点击系统变量中的path新建配置这几个变量

打开cmd命令窗口，改成自己的路径输入：

npm config set prefix "D:\nodejs\node_global"

npm config set cache "D:\nodejs\node_cache"

 

2：检查是否安装成功和更换镜像

2.1：win+r   输入cmd打开命令符  输入命令查看版本号 出现版本号安装成功

2.2：更换镜像 因为npm镜像源在国外导致安装速度慢 所以更换为国内的最新镜像 cnpm

打开命令符输入：npm config set registry https://registry.npmmirror.com/

安装成功后输入cnpm -v 出现版本号则安装成功  以后安装可用cnpm代替npm

 

3：安装脚手架

3.1：打开命令符输入 npm install -g @vue/cli

         然后等待安装完成

安装完成的效果图

检查是否安装成功 ，打开命令符输入vue -V（大写的v)  和vue --version出现版本号则安装成功

4：创建vue项目咯

4.1：新建一个文件 随便取名 然后打开命令符指定到文件夹位置

 可选择管理员身份打开 权限更大

4.2： 输入 vue create + 项目名 

4.3：开始配置   用上下左右来控制 用空格选择 第一和第二是自动配置的v3和v2 也可选

                                                                          第三是手动配置 我们这边选择第三个

 

目前我们这边选择这三个内容下载  基本够用了   其他的最好不要哦 

下一步：选2或者3  建议选择3 已经覆盖2了

下一步：路径选择 我们这边是n    y是历史 n是新建

 

下一步： 第一个是独立的文件 第二个是综合的文件   选择独立的第一个 

下一步： 是否将本次保存为预设    随便都行 我们这边选择yes   然后输入项目名字

下一步：等待下载 下载完成的效果   然后输入cd   lemon 切换到项目下面再npm run serve 打开 

下一步：等待开启项目  然后就会出现两个链接  随便选择一个都可以打开

最后效果展示：  

 

5：使用VS code 使用项目

5.1：打开vscode 文件添加到工作区    添加成功

5.2： 查看项目创建如何  打开lemon

 完美创建

5.3：使用终端开启项目  右键项目终端中选择

输入 npm run serve 开启 然后选择链接 成功打开

结束！！！