一、前言

1、本例环境

node.js:v12.14.1

npm:v6.13.4

vue:@vue/cli 4.2.3

2、node.js环境安装与测试

由于vue的安装与创建依赖node.js(JavaScript的运行环境)里的npm(包管理和分发工具),因此需要先确保安装node.js。

检测方式:打开cmd命令窗口(Window + R,输入cmd然后回车),输入 node -v 回车,正常显示node.js版本代表已安装。

因为npm会随着node.js一起安装,所以,只要是node.js正常安装,就代表npm已经安装。

检测方式:cmd命令窗口输入 npm -v 回车,能正常显示npm版本。

没有安装的也不用担心,下载node.js安装包,然后一直“下一步”点下去就可以安装。

下载地址:https://nodejs.org/zh-cn/

二、安装vue脚手架:Vue CLI 

官网:https://cli.vuejs.org/zh/

按照官方文档说明,安装命令为“npm install -g @vue/cli”。然而,原生npm的下载速度,大家都懂的...

因此,我们使用淘宝镜像来安装,命令:npm install -g @vue/cli --registry=https://registry.npm.taobao.org

等个三分钟左右,安装完成。cmd命令窗口输入 vue -V(V大写) 回车,能正常显示@vue/cli版本。

三、创建vue项目

首先我们计划在D盘vueTest文件夹下创建项目,命令窗口输入 d: 回车,再输入 mkdir vueTest 回车创建 vueTest 文件夹,再输入 cd vueTest 回车进入 vueTest 文件夹下。

1、vue create

1.1.1、cmd命令窗口输入 vue create vueinit001 回车

default (bable,eslint) // 默认

Manually select features // 手动 **选择手动创建项目

1.1.2、如果不需要太多功能的话可以选择快速创建。选择第一个直接回车,进行项目创建

1.1.3、cmd窗口输入命令 cd vueinit001 回车进入 vueinit001 项目中,再输入 npm run serve 回车启动服务

1.1.4、浏览器地址栏输入 http://localhost:8080/ ,正常打开网页表示项目创建成功

1.2.1、cmd命令窗口输入 vue create vueinit002 回车

1.2.2、这次我们选择手动创建项目,选择第二个回车(键盘上下键选择)

1.2.3、选择自己需要的特性(上下键移动键,空格键是否选中,a 键切换选择所有,i 键反转选择选项),然后回车

( ) Babel                                                                      // 支持高阶语法转换

( ) TypeScript                                                            // 支持使用 TypeScript 书写源码

( ) Progressive Web App (PWA) Support           // 支持PWA

( ) Router                                                                    // 路由

( ) Vuex                                                                       // store

( ) CSS Pre-processors                                          // CSS 预处理器

( ) Linter / Formatter                                                // 代码风格检查和格式化

( ) Unit Testing                                                          // 支持单元测试

( ) E2E Testing                                                          // 支持E2E测试

本次我们选择:Babel,Router,Vuex,CSS Pre-processors。

至于代码格式化,现在的IDE开发工具中都有格式化插件,无需另行下载。

1.2.4、这一步提示我们是否使用历史路由器,输入 n ,回车

1.2.5、这一步提示我们在项目里面需要支持何种动态样式语言,我们选择第二个(上下键移动键),回车

1.2.6、这一步提示我们选择配置文件的位置,因为每个插件都有自己单独的配置文件,我们选择第一个,回车

1.2.7、这一步提示我们是否将当前配置选项保存起来,方便下次创建项目时使用。输入 n ,回车

1.2.8、下载依赖包,创建项目

1.2.9、cmd窗口输入命令 cd vueinit002 回车进入 vueinit001 项目中,再输入 npm run serve 回车启动服务

1.2.10、浏览器地址栏输入 http://localhost:8080/ ,正常打开网页表示项目创建成功

2、使用图形化界面

2.1、打开cmd命令窗口,输入 vue ui 回车,启动图形化界面

2.2、启动成功后,会自动打开图形化界面视图

2.3、点击“创建”,进入项目创建页面

2.4、默认是在C盘根目录下,选择自己想要创建项目的文件夹

2.4.1、返回上一层:点击下图图标

2.4.2、进入文件夹内:单击文件夹

2.4.3、选择D盘:操作步骤如下

2.4.4、新建文件夹:操作步骤如下

2.5、点击“在此创建新项目”,进入创建新项目页面

2.6、输入项目名(示例:vueinit003)

2.7、包管理器,选择 npm

2.8、下拉页面,初始化git仓库,默认选中,本次联系取消选中

2.9、选择“下一步”,进入项目预设页面

2.10、项目预设 设置,同上述的 1、vue create ,这里我们选择默认,点击“创建项目”

2.11、项目创建中,同时命令窗口显示创建具体信息

2.12、项目创建完成,会自动进入项目管理页面

2.13、点击“任务”进入任务管理页面

2.14、点击“serve”进入项目编译管理页面

2.15、点击“运行”开始编译

2.16、编译成功后,点击“启动app”,会自动打开项目

 

3、拉取 2.x 模板 (旧版本)

3.1、安装桥接工具

依照官方文档说明,使用旧版本的 vue init 功能,需要安装一个桥接工具。同理,我们使用淘宝镜像。

命令:npm install -g @vue/cli-init --registry=https://registry.npm.taobao.org

3.2、在D盘vueTest文件夹下创建名为“vueinit004”的项目

命令:vue init webpack 项目名

3.3、确认项目名,直接回车

3.4、项目描述,可不写,这里直接回车

3.5、作者,可不写,这里直接回车

3.6、vue的编译方式:运行环境 + 编译器;仅运行环境。这里我们选择第一个,回车

3.7、是否下载路由,根据自个需求选择。这里不选择,输入 n ,回车

3.8、是否使用ESLint美化代码,根据自个需求选择。这里不选择,输入 n ,回车

3.9、是否使用单元测试,输入 n ,回车

3.10、是否使用E2E测试,输入 n ,回车

3.11、创建项目后的运行方式:npm;yarn;自行选择。这里我们选择npm方式,回车

3.12、创建项目

3.13、项目创建完成,输入 cd vueinit004 进入项目

3.14、输入 npm run dev 启动项目,浏览器地址栏输入 http://localhost:8080 ,进入项目页面

3.15、停止项目,安装项目依赖包

命令窗口,Ctrl + C 出现终止操作提示符,输入 N 停止项目

安装项目依赖包,同理,我们使用淘宝镜像。

命令:npm install --registry=https://registry.npm.taobao.org

安装成功后,项目文件夹内会生成一个名为“node_modules”的文件夹

3.16、同 3.14:输入 npm run dev 启动项目,浏览器地址栏输入 http://localhost:8080 ,正常进入项目页面表示项目创建完成

四、结尾

上面详细说明了三种vue项目的创建步骤,个人更倾向于使用图形化界面创建,因为视图给人的感觉更直接,具体使用哪一种看个人习惯。

Logo

前往低代码交流专区

更多推荐