当前位置: 首页 > news >正文

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

Vue环境搭建

    • NodeJs安装包
      • 安装淘宝镜像
    • 环境搭建
      • webpack安装
      • 全局安装@vue/cli
      • 查看模板
      • 创建项目
        • 1.webpack
        • 2. vue-cli

NodeJs安装包

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

node -v

因为适配某些依赖的原因,我本地使用了16.18.1的版本。
在这里插入图片描述

安装淘宝镜像

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

#解决npm速度慢
npm install -g cnpm --registry=https://registry.npm.taobao.org

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

cnpm -v

环境搭建

webpack安装

安装命令:

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

查看是否安装成功:

webpack -v

全局安装@vue/cli

官网指南
安装命令:

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

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

# vue -V或vue --version
vue --version

npm i -g @vue/cli

如果安装失败,可以使用管理员的身份运行cmd
在这里插入图片描述

查看模板

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

vue list

在这里插入图片描述

创建项目

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

1.webpack

创建命令:

#注:项目名不能大写,不能使用中文 
vue init webpack myvue1

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

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

2. vue-cli

另外一种创建项目的方式

vue create myvue2

会要求选择对应的vue版本
在这里插入图片描述
下载完成后,得到下面的目录
在这里插入图片描述

http://www.lryc.cn/news/291374.html

相关文章:

  • 2. HarmonyOS应用开发DevEcoStudio准备-1
  • 《二叉树》——3(层序遍历)
  • HarmonyOS应用开发者基础认证考试答案
  • 【前端素材】bootstrap3 实现地产置业公司source网页设计
  • C++ 数论相关题目 博弈论 Nim游戏
  • 机器学习---无偏估计
  • C语言基础13
  • 【Java】Maven配置加载到全局
  • 右手螺旋线定则
  • 2024 高级前端面试题之 React 「精选篇」
  • OSPF协议解析及相关技术探索(C/C++代码实现)
  • 如何恢复已删除的照片?
  • VMware虚拟机安装macOS
  • API管理协作工具:Apipost
  • GPT-SoVITS 本地搭建踩坑
  • 【教学类-34-02】20240130纸尺2.0 (A4横版5条,刻度25*5=125CM,有图案)
  • iText操作pdf
  • 关于SQLite 的下载与使用。配合python
  • java面向对象基础(面试)
  • 【C++修行之道】STL(初识list、stack)
  • 【环境配置】安装了pytorch但是报错torch.cuda.is_availabel()=Flase
  • 什么是模板方法模式?它的实现方式有哪些?
  • java:实现查询MySQL数据库中的数据,并导出excel、pdf类型文档(超详细)
  • Java后端须知的前端知识
  • Servlet基础之URL匹配规则
  • 【面试真题】Javascript 实现多条件过滤数组
  • spark广播变量
  • 如何让wordpress首页只显示某一篇文章全部内容?在您的主页显示选择
  • Git怎样用?(下载到本地,和在本地初始化)
  • JVM基础知识汇总篇