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的环境搭建及安装已经完成。
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
网友评论