小喵的VUE项目搭建（一）

最新推荐文章于 2022-05-19 20:42:37 发布
原创 最新推荐文章于 2022-05-19 20:42:37 发布 · 234 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文详细介绍了如何配置Node.js环境，包括下载、安装及验证步骤，并通过使用淘宝镜像源加速npm包的下载。此外，还指导了如何利用Vue CLI全局安装工具创建和启动Vue项目。

配置node环境

1.先去网上下载node。
网址：https://nodejs.org/en/

2.安装node

打开后Next下一步
在这里插入图片描述

第二小步：把勾勾上Next下一步
在这里插入图片描述

第三小步：选择安装node的路径；不推荐安装在c盘
在这里插入图片描述

直接下一步
在这里插入图片描述
直接Install安装
在这里插入图片描述
等待安装完成
在这里插入图片描述
安装成功
在这里插入图片描述
打开cmd，输入node -v和npm -v是否安装成功，成功如下：
在这里插入图片描述

为了方便起见：把淘宝镜像也安装好：
npm install -g cnpm –registry=https://registry.npm.taobao.org

在这里插入图片描述
这个为了以后方便，以后再用到npm的地方直接用cnpm来代替就好了

查看是否安装成功，成功如下
在这里插入图片描述

搭建vue项目

1.全局安装vue-cli

cnpm install --global vue-cli

安装完成
在这里插入图片描述
vue init webpage myvue（myvue项目名称）

在这里插入图片描述
启动项目
cd myvue
cnpm run dev（或者cnpm start）
在这里插入图片描述
项目成功运行：
在这里插入图片描述

打开： http://localhost:8080
在这里插入图片描述

Quiet_Nov
关注
搭建一个vue项目
无书清书的博客
12-15 456
文章目录1、安装node环境2、搭建vue项目环境3、vue项目目录讲解4、开始我们的第一个vue项目5、补充 1、安装node环境 安装node环境 1、下载地址为：https://nodejs.org/en/ 2、dos窗口输入 node -v ,输出版本号，说明我们安装node环境成功 　　 3、输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。 4、
0到1搭建前端Vue2项目
最新发布
菜鸟的博客
06-05 3445
1.1 打开 cmd 命令提示符进入到存放项目的目录，在命令提示符上使用 “ vue create 项目名” 命令创建项目。1.2 之后可以选择 vue 版本，虽然现在 vue2 已经停更，但是还是值得学习的。1.3 等待初始化 vue 脚手架后，会出现蓝色的两条命令，依次执行它们即可启动 vue。vue脚手架启动成功后会出现蓝色的两个网址，无论是哪个网址都可以打开页面。1.4 浏览器输入网址后界面如下。
【搭建vue项目】
rained_007的博客
05-19 256
文章目录一.下载并安装node.js1.node.js下载2.安装二.配置环境变量1.打开电脑的系统信息选择高级系统设置2.在弹出的对话框中点击环境变量3.在系统变量里找到path然后双击打开或点击编辑4.找到node.js的安装位置，将路径复制5.在编辑环境变量对话框中点击新建，将刚复制到的路径粘贴上，点击确定三.安装npm 一.下载并安装node.js 1.node.js下载 下载地址：http://nodejs.cn/download/ 这里根据自己操作系统选择对应的安装包下载 我这儿就用Win
搭建一个VUE项目
菜鸟
03-17 473
1.确保已安装nodejs和vue-cli 2.输入命令vue init webpack     3.npm install    4.npm run dev
Vue搭建喵喵电影
ltians95817的博客
05-27 612
Vue搭建喵喵电影（二） 一. 搭建项目首页（一） 1.在vs code（或者其他编译器）中打开vue_movies这个项目： 2.在src文件夹里，打开App.vue文件，删除（或者注释）引入的img图片 3.删除components文件夹里的HelloWord.vue 4.在router文件夹（路由相关信息）中index.js 删除HelloWord相关引用 5.此时在浏览器查看，页面一片空白，在src文件夹下面新建文件夹pages，用来存放各种页面，在pages文件夹下面新建home首页，
详细介绍：如何用Vue完成喵喵电影项目？
xiaoxijing的博客
02-27 2013
Vue是web前端中重要的框架之一，与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计，Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。所以，对于web前端开发人员来说，掌握Vue的应用非常重要。 Vue有哪些特点呢？ ●Vue的核心只关注视图，是一个构建数据的视图集合，大小只有几十kb； ●中文文档，不存在语言障碍，易于理解和学习； ●双向数据绑定，这...
云喵圈子小程序源码全开源，前后端分离
01-17
【云喵圈子小程序源码全开源，前后端分离】是一个基于现代前端技术和后端框架构建的社交类小程序项目。此项目采用前后端分离的架构设计，旨在提供一个完整的学习资源，帮助开发者理解和实践社交应用的开发流程。让...
vue cli快速创建vue项目详细过程
前端小白的博客
09-12 1048
一、vue cli的介绍和安装 Vue cli 是一个基于 Vue.js 进行快速开发的完整系统。 有三个组件： CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令） CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如：serve、build 和 inspect 命令） CLI 插件：给Vue 项目提供可选功能的
搭建VUE项目
hauchun的博客
03-01 642
1.下载nodejs 官网地址：https://so.csdn.net/so/search?q=%E5%9C%B0%E5%9D%80&spm=1001.2101.3001.7020 安装成功后运行命令node-v： 2.添加npm镜像仓库 2.1查看npm版本 npm -v 2.2添加npm镜像仓库 npm install npm -g --registry=https://registry.npm.taobao.org 3.查看webpack版本...
搭建vue项目
ccccjy_的博客
03-02 196
1、安装node.js 2、打开命令行工具，检测npm -v与node -v，确认已安装且不为旧版本 3、安装淘宝镜像cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 4、安装git 5、打开对应文件夹，右击打开 点击git bash here进入 6、全局安装vue-cli cnpm install ...
搭建Vue项目
ting119的博客
07-13 1461
背景：默认Ubuntu 系统、已完成 NodeJS、npm、cnpm搭建。1.安装 vue-cli 脚手架构建工具：npm install -g vue-cli2.初始化一个vue项目（出现的信息可回车直接默认就好了）：vue init webpack 项目名称3. 打开并进入已创建好的项目：ls cd 项目名称4. 安装项目所需要的依赖：cnpm install5.运行项目：npm run de...
Vue项目搭建
程序员的成长之道
02-18 399
下面是在IDEA代码编辑器下Vue项目的简单搭建过程： 1、vue-cli脚手架的搭建步骤 <1>检查是否安装nodejs，以及安装的版本 打开cmd命令窗口，切换到你要新建项目的文件夹下,输入命令：node -v <2>安装vue-cli 输入命令：npm install -g vue-cli 或者使用镜像 npm install -g cnpm --reg...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值