Vue-CLI从环境搭建到项目创建

1. 安装 vue 所需环境 --->>> node、npm

点击下方链接，下载node，进行安装。
安装位置，随你喜好即可。懒得折腾的，就按默认即可。
下载|Node.js中文网

2. 安装完成后，检测是否安装成功。

检测node、npm版本 -- 命令行如下：

node -v

npm -v

结果如下：

如图，即是安装node、npm成功.png

3. 替换源(因为国外的资源访问起来比较慢，所以这里建议替换为国内的源)

如果网很好，执意使用默认的国外的源，则进行如下操作：
安装vue-cli -- 命令行如下：

//-g 意思是全局安装，全局生效
npm install -g @vue/cli

vue-cli安装过程.png

检测vue版本 -- 命令行如下：

vue --version

如图，即是vue-cli安装成功.png

如果网不好，强烈建议采用替换源，需进行如下操作：
替换源 -- 命令如下：

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

如图，即是替换过程成功.png

安装vue-cli -- 命令行如下：

npm install -g @vue/cli

vue-cli安装过程.png

检测vue版本 -- 命令行如下：

vue --version

如图，即是vue-cli安装成功.png

至此，vue的环境搭建及安装已经完成。

4. 创建项目

此处以我本地的g盘下的vue文件夹为例，进行创建
1、命令行模式创建项目，操作如下：
cd 到你所想要放项目的文件夹下，创建vue项目，命令行如下：

cd g:
cd vue

到达指定的目录文件夹下.png

创建vue项目，命令行如下：

//windows下，不像macos那样，有可选项，所以先默认即可。
//想后续有选项的话，建议先用web页面，通过图形化界面，创建好模板，保存起来。
//以后再用命令行创建项目，就可以进行选择了。
//个人意见：windows下不建议用命令行创建项目。
//此处我这里已经有web页面创建项目是保存好的模板，是直接默认选择创建
vue create day2

创建vue项目，过程如图.png

按照上图提示，cd到项目文件下，将服务跑起来，命令如下：

cd day2
npm run serve

根据提示，将项目跑起来.png

打开浏览器，输入 http://localhost:8080/

如图所示，即是成功运行.png

---

2、Web UI模式创建项目，操作如下：
打开命令行，输入如下命令：

vue ui

命令行.png

输入命令，敲回车键后，浏览器自动打开 http://localhost:8000/project/select，界面如下

成功界面.png

点击创建一栏的按钮，界面如下

创建项目界面.png

点击最下面的按钮，创建项目，一步步完成创建。（配置过程，以图为例）过程如下：

1、选择你要放文件的路径和名字，然后，下一步.png

2、预设，选择手动。创建好并保存的模板，会在这里显示。然后，下一步.png

3、选择配置，建议大致如下。然后，下一步.png

4、选择配置，然后，创建项目.png

5、起个名字，保存起来，至此创建完成。后续再创建，可以使用这个模板.png

5. 至此，项目创建完毕，打开相印的文件夹，看到如下内容；

目录结构.png