vue创建项目

1、配置node环境

Node.js 安装配置-----菜鸟教程
npm 使用介绍-----菜鸟教程

淘宝镜像
淘宝 NPM 镜像是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

npm install -g cnpm --registry=https://registry.npmmirror.com

这样就可以使用 cnpm 命令来安装模块了:

cnpm install [name]

npm 版本需要大于 3.0,如果低于此版本需要升级它:

查看版本

$ npm -v
> 2.3.0#升级 npm
cnpm install npm -g#升级或安装 cnpm
npm install cnpm -g

2、安装及创建

2.1 独立版本

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用

下载vue.js(2.0版本)

下载vue.js (版本为@3.2.36)

2.2 使用 CDN 方法

2.2.1 vue2版本
  • Staticfile CDN(国内): https://cdn.staticfile.org/vue/2.2.2/vue.min.js
  • unpkg:https://unpkg.com/vue@2.6.14/dist/vue.min.js
  • cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

代码

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<div id="app"><p>{{ message }}</p>
</div><script>
new Vue({el: '#app',data: {message: 'Hello Vue.js!'}
})
</script>
2.2.2 vue3版本
  • Staticfile CDN(国内) : https://cdn.staticfile.org/vue/3.0.5/vue.global.js
  • unpkg:https://unpkg.com/vue@next, 会保持和 npm 发布的最新的版本一致。
  • cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script><script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js"></script>
<div id="hello-vue" class="demo">{{ message }}
</div><script>
const HelloVueApp = {data() {return {message: 'Hello Vue!!'}}
}Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

2.3 NPM 方法

由于 npm 安装速度慢,这里用的是淘宝的镜像及其命令 cnpm

2.3.1 vue2

指定2.0版本安装
这俩比较稳定

cnpm install vue@2.2.2
cnpm install vue@2.7.0

命令行工具
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。
全局安装 vue-cli

cnpm install --global vue-cli

创建一个基于 webpack 模板的新项目

vue init webpack my-project

这里需要进行一些配置,默认回车即可

This will install Vue 2.x version of the template.For Vue 1.x use: vue init webpack#1.0 my-project? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yesvue-cli · Generated "my-project".To get started:cd my-projectnpm installnpm run devDocumentation can be found at https://vuejs-templates.github.io/webpack

进入项目,安装并运行:

cd my-project
cnpm install
cnpm run dev

成功执行以上命令后访问 http://localhost:8080/

2.3.2 vue3

在用 Vue.js 构建大型应用时推荐使用 cnpm 安装,cnpm 能很好地和 Webpack 或 Browserify 模块打包器配合使用,然后在命令行中运行以下命令:
最新稳定版

npm init vue@latest

这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具。

$ npm init vue@latest
Need to install the following packages:create-vue@3.6.1
Ok to proceed? (y) yVue.js - The Progressive JavaScript Framework
# 这里需要进行一些配置,项目名输入 vue3-test1,其他默认回车即可
&#x2714; Project name: … vue3-test1
&#x2714; Add TypeScript? … No / Yes
&#x2714; Add JSX Support? … No / Yes
&#x2714; Add Vue Router for Single Page Application development? … No / Yes
&#x2714; Add Pinia for state management? … No / Yes
&#x2714; Add Vitest for Unit Testing? … No / Yes
&#x2714; Add an End-to-End Testing Solution? › No
&#x2714; Add ESLint for code quality? … No / YesScaffolding project in /Users/vue3-test1...Done. Now run:cd vue3-test1npm installnpm run dev

如果不确定是否要开启某个功能,你可以直接按下回车键选择 No。

在项目被创建后,通过以下步骤安装依赖并启动开发服务器:

$ cd vue3-test1
$ npm install
$ npm run devVITE v4.3.4  ready in 543 ms➜  Local:   http://localhost:5173/➜  Network: use --host to expose➜  press h to show help

成功执行以上命令后访问 http://localhost:5173/

2.3.2 Vite

Vite 是一个 web 开发构建工具,由于其原生 ES 模块导入方式,可以实现闪电般的冷服务器启动。

通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目,语法格式如下:

npm init vite-app <project-name>

创建项目 vue3-test2:

npm init vite-app vue3-test2
$ cd vue3-test2
$ cnpm install
$ cnpm run dev
> vue3-test2@0.0.0 dev /Users/vue3/vue3-test2
> vite[vite] Optimizable dependencies detected:
vueDev server running at:> Local:    http://localhost:3000/

3、注意事项或者小贴士

3.1 Windows系统环境配置权限

检测PATH环境变量是否配置了Node.js,点击开始=》运行=》输入"cmd" => 输入命令"path",输出如下结果:

PATH=C:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32;
C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;
c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib;
C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs\;
C:\Users\rg\AppData\Roaming\npm

我们可以看到环境变量中已经包含了C:\Program Files\nodejs\

这个一定要配好的撒,不然后面报错报的你哭爹喊娘

3.2 苹果电脑在安装过程中可能会出现npm权限不够
sudo   root

命令执行完输入账号密码,敷一下权限,输密码的时候不会动的,输完回车就行了

3.3 有时候有些报错命令行可能已经告诉你要怎么做了,要看好

类似什么 you could try to: npm install xxx或者you could try to run: npm install xxx.要是xxx巨长无比那就回去看看大概率你路径哪儿错了绝对路径换相对路径

好了暂时就这些,想起来再回来补充吧。Byebye~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/236408.shtml

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

相关文章

21 Vue3中使用v-for遍历对象数组

概述 使用v-for遍历对象数组在真实的开发中也属于非常常见的用法&#xff0c;需要重点掌握。 因为目前流行的是前后端分离开发&#xff0c;在前后端分离开发中&#xff0c;最常需要处理的就是对象数组类型的数据了。 比如&#xff0c;将员工信息渲染到表格中。 这节课我们就…

3d max高质量渲染时,硬件的要求有什么?

渲染过程中&#xff0c;想要追求&#xff0c;效果图高质量渲染&#xff0c;高效率渲染的过程中&#xff0c;3d max高清渲染不只是三维软件的一个要求&#xff0c;对于本地计算机的硬件要求配置也是很重要的。 今天&#xff0c;小编带大家来聊聊3d max高质量渲染过程中&#xff…

solidity 重入漏洞

目录 1. 重入漏洞的原理 2. 重入漏洞的场景 2.1 msg.sender.call 转账 2.2 修饰器中调用地址可控的函数 1. 重入漏洞的原理 重入漏洞产生的条件&#xff1a; 合约之间可以进行相互间的外部调用 恶意合约 B 调用了合约 A 中的 public funcA 函数&#xff0c;在函数 funcA…

使用 Node.js 删除文件 - 完整步骤教程

引言 在 Node.js 中处理文件尤其是移除文件&#xff0c;对于维护高效应用程序至关重要。储存和秩序当道的今天&#xff0c;删除不必要或冗余的文件能力显得尤为关键。本文深入探讨你会想要使用这个强大功能的时刻和原因&#xff0c;并通过各种案例展示了这个概念&#xff0c;同…

【C#】.net core 6.0 通过依赖注入注册和使用上下文服务

给自己一个目标&#xff0c;然后坚持一段时间&#xff0c;总会有收获和感悟&#xff01; 请求上下文是指在 Web 应用程序中处理请求时&#xff0c;包含有关当前请求的各种信息的对象。这些信息包括请求的头部、身体、查询字符串、路由数据、用户身份验证信息以及其他与请求相关…

案例系列:营销模型_客户细分_无监督聚类

案例系列&#xff1a;营销模型_客户细分_无监督聚类 import numpy as np # 线性代数库 import pandas as pd # 数据处理库&#xff0c;CSV文件的输入输出&#xff08;例如pd.read_csv&#xff09;/kaggle/input/customer-personality-analysis/marketing_campaign.csv在这个项…

KoPA: Making Large Language Models Perform Better in Knowledge Graph Completion

本来这个论文用来组会讲的&#xff0c;但是冲突了&#xff0c;没怎么讲&#xff0c;记录一下供以后学习。 创新点 按照我的理解简单概述一下这篇论文的创新点 提出使用大模型补全知识图谱&#xff0c;并且融合知识图谱的结构信息提出一个新的模型KoPA模型&#xff0c;采用少…

JavaCV音视频开发宝典:UDP局域网组播推流,多播推流,局域网多网段推流,使用UDP方式推送TS组播流,实现UDP一对多组播

《JavaCV音视频开发宝典》专栏目录导航 《JavaCV音视频开发宝典》专栏介绍和目录 ​ 前言 在之前文章中我们已经实现rtp点到点传输JavaCV音视频开发宝典:rtp点到点音视频传输(一对一音视频直播)和rtp广播JavaCV音视频开发宝典:rtp广播方式发送TS流音视频传输(一对多音视…

Linux宝塔面板本地部署Discuz论坛发布到公网访问【无需公网IP】

文章目录 前言1.安装基础环境2.一键部署Discuz3.安装cpolar工具4.配置域名访问Discuz5.固定域名公网地址6.配置Discuz论坛 前言 Crossday Discuz! Board&#xff08;以下简称 Discuz!&#xff09;是一套通用的社区论坛软件系统&#xff0c;用户可以在不需要任何编程的基础上&a…

算法训练营Day23(二叉树)

669. 修剪二叉搜索树 669. 修剪二叉搜索树 - 力扣&#xff08;LeetCode&#xff09; 这里本身不难&#xff0c;更多的是递归的技巧&#xff0c;在脑子里模拟一遍递归逻辑&#xff0c;记忆好模板就好了。 class Solution {public TreeNode trimBST(TreeNode root, int low, int…

uni-app学习记录

uni-app官网学习记录 uni-app注意点记录 页面跳转注意事项 navigateTo, redirectTo 只能打开非 tabBar 页面。switchTab 只能打开 tabBar 页面。reLaunch 可以打开任意页面。不能在首页 onReady 之前进行页面跳转。 页面通讯 // 发起页面uni.$emit(update,{msg:页面更新})//…

软件设计模式:六大设计原则

文章目录 前言一、开闭原则二、里氏替换原则三、依赖倒转原则四、接口隔离五、迪米特法则六、合成复用原则总结 前言 在软件开发中&#xff0c;为了提高软件系统的可维护性和可复用性&#xff0c;增加软件的可扩展性和灵活性&#xff0c;程序员要尽量根据6条原则来开发程序&am…

爬虫scrapy中间件的使用

爬虫scrapy中间件的使用 学习目标&#xff1a; 应用 scrapy中使用间件使用随机UA的方法应用 scrapy中使用代理ip的的方法应用 scrapy与selenium配合使用 1. scrapy中间件的分类和作用 1.1 scrapy中间件的分类 根据scrapy运行流程中所在位置不同分为&#xff1a; 下载中间件…

idea好用的十个插件分享,用后敲代码的速度提升好几倍,亲测有效

简介&#xff1a; 在日常的开发工作中&#xff0c;我发现了一些非常实用的 IntelliJ IDEA 插件&#xff0c;它们能够显著提升开发效率&#xff0c;让编码变得更加轻松愉快。今天&#xff0c;我想分享给大家我的个人推荐&#xff0c;希望对你的开发工作有所帮助&#xff01; L…

Postman调用HTTPS需要配置

1、配置—Settings 2、General—SSL cert…&#xff1a;改成OFF 3、添加请求IP 欢迎大家阅读&#xff0c;本人见识有限&#xff0c;写的博客难免有错误或者疏忽的地方&#xff0c;还望各位大佬指点&#xff0c;在此表示感谢。觉得本文章有帮助到的&#xff0c;点个赞呗

P4316 绿豆蛙的归宿

题意&#xff1a;给出一个有向无环图&#xff0c;对于每个点&#xff0c;一共有k条出边&#xff0c;则选择每条边的概率相等&#xff0c;都为1/k&#xff0c;问从点1走到点n的期望路径长度 思路&#xff1a;有向无环图&#xff0c;考虑拓扑&#xff0c;本题不同于P6154 游走&a…

项目进度管理:掌握进度管理技巧,保障项目不延期

项目进度问题通常在小型团队中并不显著&#xff0c;因为这类团队通常人数较少&#xff0c;成员间的沟通成本相对较低。这使得他们在执行项目时更加团结和协作。 然而&#xff0c;当团队规模扩大到上百人时&#xff0c;这使得沟通变得更为复杂&#xff0c;在这个庞大的团队中&…

10 分钟了解 nextTick,并实现简易版的 nextTick

一、什么是 nextTick nextTick 是一个用于在 DOM 更新完成后执行回调函数的方法。在 Vue.js 或其他类似框架中&#xff0c;当我们修改了数据后&#xff0c;DOM 并不会立即更新&#xff0c;而是会进入一个队列中&#xff0c;然后在下一个 tick 执行更新。nextTick 提供了一种方式…

JAVA线上事故:递归导致的OOM

最近因为人员离职&#xff0c;接手一个项目&#xff0c;是xxljob的客户端&#xff0c;部署在k8s上&#xff0c;在排查线上工单时&#xff0c;发现了一个问题&#xff1a; 在管理界面上&#xff0c;我惊讶的发现&#xff0c;三个月的时间&#xff0c;2个Pod&#xff0c;每个都重…

MacOS 终端显示 Git 分支的名称

前提&#xff1a;MacOS 默认终端是不显示 Git 分支的名称的&#xff0c;个人感觉难受&#xff0c;样式也不好看&#xff01;就找到了 oh-my-zsh 终端输入以下指令就OK了 sh -c "$(curl -fsSL https://gitee.com/shmhlsy/oh-my-zsh-install.sh/raw/master/install.sh)&qu…