【创建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版本

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

相关推荐
linux_cfan31 分钟前
2026版 WordPress 视频插件终极选型:知识付费创作者如何低成本打造专业在线课堂?
前端·javascript·音视频·html5
pas1361 小时前
46-mini-vue 实现编译 template 为 render 函数
前端·javascript·vue.js
木斯佳1 小时前
前端八股文面经大全:京东零售前端实习一面(2026-1-20)·面经深度解析
前端·状态模式·零售
YuMiao1 小时前
把 WebSocket 服务迁移到 Cloudflare Durable Objects —— 以一次协同编辑实战为例
javascript·node.js
zheshiyangyang1 小时前
前端面试基础知识整理【Day-8】
前端·面试·职场和发展
a1117761 小时前
优雅简历(html开源)
前端·开源·html
Cache技术分享1 小时前
330. Java Stream API - 处理 Optional 对象:像流一样优雅地使用 Optional
前端·后端
感性的程序员小王2 小时前
别再手撸架构图了!我写了个 AI 工具,把 Spring Boot 代码一键变成 Draw.io 流程图
前端·后端
左夕2 小时前
深度解析vue的生命周期
vue.js
猪头男2 小时前
【从零开始学习Vue|第七篇】深入组件——Props
前端