【创建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.hqwc.cn/news/433407.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

架构学习(一):scrapy实现按脚本name与日期生成日志文件

原生scrapy日志机制 一般情况下,我们可以直接在setting文件中定义日志文件,这种会把所有脚本的日志都写在同一个文件 LOG_LEVEL INFO # 日志级别 LOG_STDOUT True # 日志标准输出 LOG_FILE rD:\python\crawler\logs\1163.log # 日志文件路径现在…

调用阿里通义千问大语言模型API-小白新手教程-python

阿里大语言模型通义千问API使用新手教程 最近需要用到大模型,了解到目前国产大模型中,阿里的通义千问有比较详细的SDK文档可进行二次开发,目前通义千问的API文档其实是可以进行精简然后学习的,也就是说,是可以通过简单的API调用在自己网页或…

【Java 数据结构】List接口详解

List 1. 什么是List2. 常见方法介绍3. List的使用 1. 什么是List 在集合框架中,List是一个接口,继承自Collection。 Collection也是一个接口, Iterable也是一个接口,表示实现该接口的类是可以逐个元素进行遍历的,具…

element-UI上传文件后valid提示不消失

问题描述&#xff1a;上传文件完成后&#xff0c;必填信息提示不消失 解决方法&#xff1a;在<el-form-item>标签添加show-message属性&#xff0c;字段为空时才显示提示信息 <el-form-item :prop"fileList" :show-message"!form.fileList || !form.f…

详解矩阵的LDU分解

目录 一. 矩阵分解 二. 解方程 三. 例题说明 四. 矩阵的LDU分解 五. 矩阵三角分解的唯一性 一. 矩阵分解 其实我们可以把一个线性系统&#xff08;Linear System&#xff09;看成两个三角系统&#xff08;Triangular Systems&#xff09;&#xff0c;本文章将解释为什么可…

基于Mybatis,Vue,ajax,ElementUI实现的增删改查

下面是项目获取连接&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/158eyyhg2X1bQtMEVT1ut1Q?pwd1234 提取码&#xff1a;1234 界面如下&#xff1a;

外卖跑腿系统开发:构建高效、安全的服务平台

在当今快节奏的生活中&#xff0c;外卖跑腿系统的开发已成为技术领域的一个重要课题。本文将介绍如何使用一些常见的编程语言和技术框架&#xff0c;构建一个高效、安全的外卖跑腿系统。 1. 技术选择 在开始开发之前&#xff0c;我们需要选择适合的技术栈。常用的技术包括&a…

如何看待程序员抄代码还拿着高薪这一说法?

程序员的工资构成&#xff1a;会复制粘贴值1块&#xff0c;知道去哪复制值5K&#xff0c;知道粘贴在哪值10K&#xff0c;粘贴完了能跑起来值15 有人说&#xff1a;能带领一伙人复制粘贴值20k。 有人说&#xff1a;能写一个自动复制粘贴的系统值30k。 有人纳闷问到&#xff1a…

pinia实现todos

store/todos.js //导入defineStore import {defineStore} from pinia const userTodosStoredefineStore(todos,{ state:()>({// list:[// {id:1,name:吃饭,done:false},// {id:2,name:睡觉,done:true},// {id:3,name:打豆豆,done:false}// ],list:JSON.parse(l…

OpenAI为ChatGPT推出多语言功能Alpha版灰度测试;微软Copilot网页端和App更新了GPTs和购买Copilot Pro功能

OpenAI为ChatGPT推出多语言功能灰度测试。 微软Copilot网页端和App更新了GPTs和购买Copilot Pro功能 关于ChatGPT的详细介绍请看我这篇文章&#xff1b;关于Copilot Pro的详细介绍请看我这篇文章。 OpenAI推出多语言功能灰度测试 1月26日&#xff0c;OpenAI对其广受欢迎的C…

Cesium工具应用

文章目录 0.引言1.场景截图2.卷帘对比3.反选遮罩4.鹰眼视图5.指南针与比例尺6.坐标测量7.距离测量8.面积测量9.热力图10.视频投影11.日照分析12.淹没分析13.通视分析14.可视域分析15.缓冲区分析16.地形开挖17.要素聚合18.开启地下模式19.开启等高线20.坡度坡向21.填挖方量计算2…

对话泛能网程路:能源产业互联网,行至中程

泛能网的能源产业互联网的标杆价值还不仅于此。其在产业互联之外&#xff0c;也更大的特殊性在于其也更在成为整个碳市场的“辅助运营商”&#xff0c;包括电力、碳等一系列被泛能网帮助企业改造和沉淀的要素资产&#xff0c;都在构成着碳交易市场的未来底层。 这恰是产业互联…