【创建vue项目的两种方式】

Vue环境搭建

NodeJs安装包

下载链接:官网链接
下载下来后,直接傻瓜式的安装即可。
通过在cmd控制台输入以下命令查看是否安装成功

bash 复制代码
node -v

因为适配某些依赖的原因,我本地使用了16.18.1的版本。

安装淘宝镜像

npm的服务器是外国的,所以有时候我们安装"模块"会超级慢,所以配置一个国内服务器,速度会很快。

bash 复制代码
#解决npm速度慢
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后,通过以下命令查看版本

bash 复制代码
cnpm -v

环境搭建

webpack安装

安装命令:

bash 复制代码
#不指定版本的命令npm install webpack
# 为了避免版本冲突,尽量指定版本
# cnpm安装速度更快
cnpm install webpack@3.6.0 -g
 #  -g 表示是否进行全局安装,因为有些项目特有的用特定的版本

查看是否安装成功:

bat 复制代码
webpack -v

全局安装@vue/cli

官网指南
安装命令:

bash 复制代码
cnpm install -g @vue/cli
 #  -g 表示是否进行全局安装,因为有些项目特有的用特定的版本

通过在控制台输入以下命令查看是否安装成功

bash 复制代码
# vue -V或vue --version
vue --version

如果安装失败,可以使用管理员的身份运行cmd

查看模板

查看当前可以创建哪些模板的工程

bash 复制代码
vue list

创建项目

目前创建vue工程的方式有两种,一种是webpack创建,另外一种是使用vue-cli创建

1.webpack

创建命令:

bash 复制代码
#注:项目名不能大写,不能使用中文 
vue init webpack myvue1

注意:安装时可能提示(如下)就使用命令安装一下:cnpm i -g @vue/cli-init

注意:这种方式有时候服务器链接不上。处理方案

2. vue-cli

另外一种创建项目的方式

bash 复制代码
vue create myvue2

会要求选择对应的vue版本

下载完成后,得到下面的目录

相关推荐
卸任1 小时前
Vibe coding工具使用心得
前端·ai编程
brien91 小时前
为什么模型标称 1M,Google Antigravity 聊到 256K 却突然失忆?我们给它做了个原生行内监控圆环
前端
修炼的dance2 小时前
录屏关键帧间隔多少合适?六档实测,2秒到10秒小了75.6%
前端
Lank_M2 小时前
关键帧从1秒拉到10秒,录屏小87.3%,摄像头小10.8%
前端
补码缩写2 小时前
用 ffprobe 拆录屏,八成字节在 29 个关键帧上
前端
百思不得小李2 小时前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易2 小时前
Cmder 停更 17 个月,2.0 支持 Windows Terminal
前端·后端·程序员
清晨Coding2 小时前
删了 Cookie 还能自动登录?Google系网站登录态自动恢复的原理分析
javascript
风骏时光牛马2 小时前
前沿视界
前端
kyriewen2 小时前
我扫了 814 个依赖,97 个还敢要 Node 10
前端·javascript·程序员