Vue-CLI从环境搭建到项目创建
2019-04-16 本文已影响0人
寒山半秋
1. 安装 vue 所需环境 --->>>
node、npm
点击下方链接,下载node,进行安装。
安装位置,随你喜好即可。懒得折腾的,就按默认即可。
下载|Node.js中文网
2. 安装完成后,检测是否安装成功。
检测node、npm版本 -- 命令行如下:
node -v
npm -v
结果如下:

3. 替换源(因为国外的资源访问起来比较慢,所以这里建议替换为国内的源
)
如果网很好,执意使用默认的国外的源,则进行如下操作:
安装vue-cli -- 命令行如下:
//-g 意思是全局安装,全局生效
npm install -g @vue/cli

检测vue版本 -- 命令行如下:
vue --version

如果网不好,强烈建议采用替换源,需进行如下操作:
替换源 -- 命令如下:
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vue-cli -- 命令行如下:
npm install -g @vue/cli

检测vue版本 -- 命令行如下:
vue --version

至此,vue的环境搭建及安装已经完成。
4. 创建项目
此处以我本地的g盘下的vue文件夹为例,进行创建
1、命令行模式创建项目,操作如下:
cd 到你所想要放项目的文件夹下,创建vue项目,命令行如下:
cd g:
cd vue

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

按照上图提示,cd到项目文件下,将服务跑起来,命令如下:
cd day2
npm run serve

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

2、Web UI模式创建项目,操作如下:
打开命令行,输入如下命令:
vue ui

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

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

点击最下面的按钮,创建项目,一步步完成创建。(配置过程,以图为例)过程如下:





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