vue创建

最新推荐文章于 2023-09-24 09:32:38 发布
原创 最新推荐文章于 2023-09-24 09:32:38 发布 · 175 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

说明：因为自己一直出错，找了好多资料都不适合自己，这个让我的程序可以用了。
来源说明：

https://www.cnblogs.com/ysx215/p/14107054.html

vue-cli4.5 创建vue项目

  1. 准备工作
    1.1 安装node.js
    安装过程很简单，在官网下载安装包，点击安装，一直下一步直到安装完成即可，新版本的node.js会自动添加环境变量，不需要再手动添加环境变量，如有疑问，可自行前往环境变量查看。

node.js官网：https://nodejs.org/zh-cn/

出现下图所示表示node安装完成。
在这里插入图片描述

1.2 检查安装的node.js是否成功及其版本号
进入cmd（Windows+R进入运行界面，输入cmd回车即可）窗口，在cmd窗口中输入命令：

node -v

若出现node.js的版本号，则表示node.js安装成功。如下图所示
在这里插入图片描述

1.3 检查npm版本，并修改镜像为淘宝镜像
安装node后会自动安装npm，可以通过命令查看npm的版本号

npm -v

若出现npm的版本号，即表示npm已经安装成功，如下图所示
在这里插入图片描述

在命令行输入如下命令，配置npm镜像为淘宝镜像

npm config set registry https://registry.npm.taobao.org

设置之后可通过如下命令查看是否成功配置为淘宝镜像

npm config get registry

若出现淘宝镜像的URL路径则表示配置淘宝镜像成功，如下图所示
在这里插入图片描述
当然，也可以安装cnpm，通过cnpm来执行npm命令，安装cnpm命令如下

npm install -g cnpm --registry=https://registry.npm.taobao.org
//--registry=https://registry.npm.taobao.org 为淘宝的镜像地址，下载过慢时可以添加此地址
cnpm -v  //查看cnpm是否安装成功及其版本号，若出现版本号则表示安装成功。

出现如下图所示，表示环境准备工作完成
在这里插入图片描述

  1. 安装vue-cli4.5
    因为vue-cli4.5和之前的3.0以下的老版本不一样，安装命令也有所不同。
npm install -g @vue/cli    //全局安装vue-cli最新版本

安装过程中若下载过慢，可以使用cnpm进行安装，或采取上述方式，在命令后加上淘宝镜像地址

安装之后查看vue-cli是否安装成功及其版本号

vue -V   //注意，此时需要使用大写的-V，小写的-v

出现下图所示表示vue脚手架（vue-cli4.5）安装成功
在这里插入图片描述

  1. 创建vue项目
    3.1 进入创建项目目录
    根据自己的需要进入想要创建vue项目的目录，然后通过cmd窗口执行命令

（可通过在目录窗口上方的路径地址栏中输入cmd进入当前目录，也可以从c盘逐步进入当前目录）

vue create test001   //创建项目，test001位项目名，项目名中不允许出现大写字母

3.2 选择自定义配置
通过键盘中的向下箭头控制，选择 Manually select features 手动配置

如下图所示。
在这里插入图片描述

手动配置选项解释在这里插入图片描述
在这里插入图片描述

3.3 选择手动配置中的选项
向上向下箭头控制方向，空格进行选中，可选择如下配置，引入Router 和vuex以及CSS预处理器，选择完成回车即可
在这里插入图片描述
3.4 选择vue版本
因为 vue 3还没有正式发布，建议非尝鲜项目选择 vue 2.x。

3.5 选择是否使用历史模式
此处建议选择不使用，即输入N，选择使用hash模式
在这里插入图片描述

3.6 选择CSS预处理器
此处建议选择 Sass/SCSS(with dart-sass)，即直接选择回车即可。
node-sass是自动编译实时的，dart-sass需要保存后才会生效
在这里插入图片描述
3.7 选择eslint 校验规则
此处建议选择默认配置，即直接回车即可。
在这里插入图片描述
3.8 选择什么时候进行代码校验
此处建议选择第一个，即直接回车即可

Lint on save 保存时检查， Lint and fix on commit 提交时检查

在这里插入图片描述

3.9 选择如何存放配置
此处一般选择默认配置，即直接回车

In dedicated config files 存放到独立文件中，In package.json 存放到 package.json 中
在这里插入图片描述
3.10 选择是否保存本次配置
建议选择N，即不保存，否则以后创建项目修改不配置不太方便
在这里插入图片描述
3.11 等待创建项目
在这里插入图片描述
若出现如下界面，表示项目创建完成。
在这里插入图片描述

  1. 运行创建的vue项目
    4.1 进入创建的vue项目的目录
    此处选择进入test001(即创建的项目test001的目录)
    在这里插入图片描述
    4.2 在项目目录下执行命令运行项目
npm run serve

在这里插入图片描述
出现如下页面表示运行成功。
在这里插入图片描述
4.3 在浏览器中查看项目运行是否成功
在浏览器中打开上述vue项目部署的地址，看到下图所示即表示项目创建运行成功。
在这里插入图片描述
5. 也可以通过vscode打开项目，并运行项目
5.1 打开文件夹
在页面左上角选择File,在下拉菜单中选择 Open Folder
在这里插入图片描述
5.2 打开控制台
找到项目所在目录，打开，然后在页面上方选择打开新的控制台（Terminal）
在这里插入图片描述

 npm run serve   //在控制台输入此命令即可

在这里插入图片描述

5.3查看项目是否运行成功
点击项目部署地址在浏览器中打开，若出现如下图所示页面，表示项目创建运行成功
在这里插入图片描述

GJLfight
关注
【VUE】创建一个vue项目详细步骤
最新发布
Liguangmei的博客
07-10 8385
安装node.js查看是否安装成功，如下图表示安装成功。
vue 时间插件_创建第一个VueJS插件
weixin_39557199的博客
11-24 142
随着VueJS的流行，社区创建的VueJS插件变得越来越普遍和强大。实际上，我发现有些插件非常有用。 例如，有许多很棒的UI库和实用程序插件为我节省了很多开发时间。尽管创建自己的插件似乎是一项艰巨的任务，但实际上也没那么难。 在本教程结束时，您将创建了您的第一个VueJS插件。明白它们如何工作。学习到工具，方法来构建更复杂的插件。现在开始了！如何设置插件从广义上讲，我们的插件只是一个公开.inst...
vue如何创建vnode,VueJS渲染VNode
weixin_31669073的博客
12-30 718
tl;dr:Given a VueJS VNode object, how do I get the HTML element that would be generated if it were rendered?e.g.:> temp1VNode{tag: "h1", data: undefined, children: Array(1), text: undefined, elm: ...
vue如何创建vnode_VueJS渲染VNode
weixin_35907189的博客
12-30 952
tl;dr:Given a VueJS VNode object, how do I get the HTML element that would be generated if it were rendered?e.g.:> temp1VNode{tag: "h1", data: undefined, children: Array(1), text: undefined, elm: ...
vue 导入excel插件_创建第一个VueJS插件
weixin_39760721的博客
01-03 145
随着VueJS的流行，社区创建的VueJS插件变得越来越普遍和强大。实际上，我发现有些插件非常有用。 例如，有许多很棒的UI库和实用程序插件为我节省了很多开发时间。尽管创建自己的插件似乎是一项艰巨的任务，但实际上也没那么难。 在本教程结束时，您将创建了您的第一个VueJS插件。明白它们如何工作。学习到工具，方法来构建更复杂的插件。现在开始了！如何设置插件从广义上讲，我们的插件只是一个公开.inst...
初步认识vuejs-创建vue
hjy170314的博客
10-22 205
vue的创建方法： 在<script></script>标签中创建vue，有两种创建方式，一种匿名创建，一种给vue一个参数（名称）的创建 一匿名创建：  new Vue({ el:"#app",      //挂在根元素，只能在id为app的元素上使用vue的特性 data:{       // 存储vue数据的对象 message:'hello clover...
创建vue 报错vue-cli Failed to download repo vuejs-templates/webpack
热门推荐
weixin_42418774的博客
07-13 1万+
如题所示，通过vue-cli工具命令vue init webpack vuedemo创建vue项目的时候报错，提示连接超时，应该是下载某个package的时候，需要翻墙，导致出现连接超时。超时错误截图如下： 按照网络上的提示，解决办法是改为离线创建，我们需要下载github仓库中的vue-templates/webpack，然后解压到本地。下载地址为：https://github.com/vuejs-templates/webpack，下载之后，解压到本地用户目录下的.vue-te...
创建第一个VueJS插件
ETHAN IN IT
01-18 431
随着VueJS的流行，社区创建的VueJS插件变得越来越普遍和强大。 实际上，我发现有些插件非常有用。 例如，有许多很棒的UI库和实用程序插件为我节省了很多开发时间。 尽管创建自己的插件似乎是一项艰巨的任务，但实际上也没那么难。 在本教程结束时，您将 创建了您的第一个VueJS插件。 明白它们如何工作。 学习到工具，方法来构建更复杂的插件。 现在开始了！ 如何设置插件 从广义上讲，我...
Vuejs实例-使用vue-cli创建项目
long0801的博客
09-08 1115
1，首先从官方网站下载安装Node.js，建议使用6.x版本，同时也会一并安装npm工具，npm>3.10以上。   2，npm安装很慢（国外服务器），所以一般推荐使用npm淘宝镜像cnpm，先安装下cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org 安装好cnpm后，以后使用npm的地方就可以使
vue环境搭建与创建第一个vuejs文件
chuorena的博客
09-05 3781
我们在前端学习中，学会了HTML、CSS、JS之后一般会选择学习一些框架，比如Jquery、AngularJs等。这个系列的博文是针对于学习Vue.js的同学展开的。 　　1.如何简单地使用Vue.js 　　如同以前我们学过的Jquery一样，我们在程序中使用Vue.js时也可以使用直接引用的方法，直接下载并用  标签引入，Vue.js会被注册为一个全局变量。在这里有一个重要提示：在Vue.j
vuejs的入门＜1＞创建项目
SS1388163的博客
09-24 394
➜ Local: http://localhost:5173/ 把http://localhost:5173/ 复制的浏览器。cd aaa 进入刚创建的项目aaa 复制到ccmd ctrl +c是cmd的复制键 ctrl +v粘贴。Scaffolding project in D:\Bootstrap\2\aaa…D:>cd D:\Bootstrap\2 进入已创建的目标文件夹创建项目。(y) y 可以选no。
vuejs加载顺序_Vuejs插件，用于创建史诗般的顺序动画入口
cuk5239的博客
07-26 615
vuejs加载顺序 顺序进入 (vue-sequential-entrance) Vuejs Plugin for creating epic sequential animation entrances with a list of elements. Zero effort. Really lightweight. Vuejs插件，用于创建具有元素列表的史诗般的顺序动画入口。 零努力。 真正...
idea创建vue项目(转载)
暴走的山交君的博客
01-11 1348
IDEA下新建Vue项目 1、首先需要安装nodeJS，并配置全局环境变量。 2、在IDEA中新建一个空的project 3、在setting中配置JavaScript的语言版本为6     在file types的html中添加.*vue      4、在插件库中添加vue.js插件          5、在IDEA中打开Terminal编辑器（Alt+F12），检查node.js和npm是否
vue-cli（vuejs 脚手架）创建一个项目
ghost_violets的博客
10-30 384
在一个大型的项目里，把所有的代码都放到一个文件里显然是不现实的，所以在实际做项目的时候，我们都会把他们分类放到不同的文件里面，使它们尽可能的小，这样也便于后期的维护和管理。 根据项目的功能需求，划分出不同的功能模块，然后建立相关的文件夹进行统一的管理。这种管理访问一般我们叫做 工程化 管理。 什么是 vue-cli 当我们的 vuejs 项目一定大的时候，我们也要考虑一下这种工程化的管理模式，vu...
vue创建项目中遇到的问题
qq_39990827的博客
05-27 331
VsCode新建VueJs项目的详细步骤 —es问题需要注意 https://www.jb51.net/article/124406.htm 创建vue项目的过程中出现 关于npm audit fix 的解决方法 https://blog.csdn.net/weixin_40817115/article/details/81007774 ...
使用vue-cli创建new project报错： Failed to download repo vuejs-templates/webpack: read ECONNRESET
TO_NARUTO的博客
07-22 3944
前言 今天学习vue-cli，使用命令vue init webpack projectname常见新的项目时，出现下面的报错信息： 通过google找到github上相同错误提交信息，Failed to download repo vuejs-templates/webpack: read ECONNRESET。 解决办法： 报错原因： 通过查看相关资料，发现报错原因在vue官网中有提过： 使用命令vue --version查看我的vue-cli版本，信息如下： 果然我的vue-cli版本超过3,按照
Vue+element如何创建一个项目？
juzimvp的博客
08-29 2395
我们在前端学习中，学会了HTML、CSS、JS之后一般会选择学习一些框架，比如Jquery、AngularJs等。今天司科总结的是如何创建一个Vue项目。 相关技术： 　　vuejs2.0：渐进式JavaScript框架，易用、灵活、高效，似乎任何规模的应用都适用。 　　element：基于vuejs2.0的ui组件库。 　　vue-router：一般单页面应用spa都要用到的前端路由。 ...
【VueJS】windows环境安装vue-cli及webpack并创建VueJS项目
12-09 231
1. 安装node.js, Node.js安装包及源码下载地址为：https://nodejs.org/en/download/。 这次node.js不是主角，默认已安装好了，通过npm –v查看node.js是否安装好以及安装的node.js版本 如果你安装的是旧版本的 npm，可以通过 npm 命令“npm install npm -g”来进行版本升级。 ...
vueJs初探-创建第一个vue项目
weixin_30474613的博客
01-08 156
***日常笔记*** 1.所需模块： --①Node.js：JavaScript运行环境 --②npm：Nodejs下的包管理器，这里推荐各个大神使用的淘宝NPM镜像进行安装（http://npm.taobao.org/） --③webpack：JavaScript 应用程序的静态模块打包器(module bundler) --④vue-cli：用户生成Vue工程模板 2.安装Node...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值