Vue——用脚手架快速搭建一个vue项目

已于 2022-07-10 10:10:02 修改
阅读量383 收藏
点赞数
分类专栏： Vue 文章标签： vue 小技巧 windows
于 2021-11-19 14:46:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43201350/article/details/121422425
版权

1、全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目

npm install -g vue-cli

2、安装webpack，它是打包js的工具

npm install -g webpack

3、创建vue项目

myvue为自定义的项目名称

vue init webpack myvue

4、运行项目

cd到项目文件夹，cd myvue

npm run dev
dbt@L
关注
专栏目录
Vue--》超详细教程——vue-cli脚手架的搭建与使用
ztK63LrD的博客
11-14 4658
它简化了程序员基于webpack创建工程化的Vue项目的工程。其好处就是简省了程序员花费时间去配置webpack，从而目标只需专注在撰写项目应用上。，基于vue-cli这个系统，我们就可以快速搭建好“（英文名：Singleagepplication）简称SPA，顾名思义指的是，所有的功能与交互都在这唯一的一个页面内完成。
Vue--》超详细教程——vite脚手架的搭建与使用
ztK63LrD的博客
12-29 4547
我们要知道Vue是有两个开发者工具的，分别适配Vue2和Vue3，之前在学习Vue2时使用的工具仅限于Vue2使用，在Vue3项目中是不能进行使用的，所有我们还是需要单独安装一个适配Vue3的开发者工具。安装完成打开了开发者模式，小伙伴可能会发现，浏览器的右上角没有Vue插件的标志啊，只需如下操作即可。在工程化的项目中，vue要做的事情很简单，通过main.js把App.vue渲染到index.html的指定区域中。当然你也可以同时打开2和3的工具，用哪个版本的Vue，哪个版本的vue开发者工具就是亮。
利用vue脚手架快速搭建项目
太空紫云
08-15 148
第一步：去官网下载nodejs，自己选择路径，安装时候可以直接选择next，next...这里不详细说明； 第二步：检查是否安装好，wins+R调出终端，输入cmd指令； 输入node -v回车； 输入npm -v回车； 第三步：设置全局变量，详细见文章https://blog.csdn.net/qq_41684621/article/details/111308202，里面讲的非常清楚； 第四步：安装淘宝镜像cnpm 命令行输入指令 npm install -g cnpm --r
使用vue-cli（vue脚手架）快速搭建项目
海涛高软
10-27 226
https://www.jianshu.com/p/1ee1c410dc67 FR:徐海涛（hunk Xu）
用vue脚手架快速搭建项目步骤，详细
qq_42707594的博客
01-25 933
什么是vue脚手架： vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。 创建项目步骤如下： 1、安装Vue CLI脚手架 指令：cnpm i -g @vue/cli 一共35个文件 2、创建Vue项目 指令：vue create 项目名 若手动选择功能，步骤如下： 选择功能。通过上下键控制位置，空格键来确定 是否选择 选择vue本版本 第一个yes是选择路由模式，n是选择哈希模式 这一
谈谈如何利用vue脚手架快速创建一个项目
loveu22death的博客
05-16 408
首先你必须要准备的两个工具 1.node 2.vue脚手架 我们需要提前下好node和vue脚手架才可以开始创建项目，那怎么看我们是否有安装好node和vue脚手架呢？我们往下看。 我们可以新建一个文件夹，然后 同事按住ctrl+shift+鼠标右键进入 windowspowershell，如下图所示 windowspowershell是window10给我们提供的一个命令行工具，和cmd黑窗口类似，黑窗口也可以进行改操作，进去以后我们可以键入指令 vue -V 和node -V 分别查看我们
使用vue-cli脚手架工具搭建vue-webpack项目
10-17
Vue官方提供了一个强大的脚手架工具——vue-cli，它可以简化项目的初始化过程，帮助开发者快速搭建项目结构。 首先，搭建VueWebpack项目的第一步是确保你已经安装了Node.js环境。Node.js是JavaScript的服务器端运行...
使用脚手架（Vue-Cli）快速创建一个vue项目的步骤
qq_59808309的博客
01-22 5129
一、安装vue https://cn.vuejs.org/v2/guide/installation.html 二、先确定是否安装了node.js、npm和cnpm node.js的下载地址：Node.js NPM（node package manager）是随同node.js一起安装的包管理工具，能解决前端代码部署上的很多问题，常见的使用场景有以下几种： 允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编
Vue Elementui 项目实战 —— 项目的环境搭建
最新发布
cccloveforever的博客
04-12 1985
vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。1.全局安装脚手架注意：安装制定版本的脚手架5.0.62.全局卸载脚手架 cnpm uninstall -g vue-cli用上面指令卸载不了，可以手动删除，输入然后删除npm 下的所有 vue 文件，然后再查看是否存在脚手架。
Vue笔记——搭建脚手架并快速创建Vue项目
与月亮私奔l的博客
12-20 309
一、准备工作 1. 安装node.js和npm Vue的脚手架是依赖于node.js的，所以无论是安装新版本还是旧版本，我们都要安装node.js。 我们可以直接到node.js官网下载，然后像安装普通软件一样安装node.js。 npm(node package manager)是node的包管理工具，我们在后面主要是使用npm来搭建脚手架和安装一些常用的组件。 node.js成功安装之后，npm一并安装成功，这个时候我们可以打开cmd窗口，输入 node -v 和 npm -v 来查看node.js和
用vue脚手架创建一个vue项目
syh12345_的博客
07-13 163
1.准备工作 需要安装nodeJS ，可以直接去官网下载。下载完成后npm就会自动的下载 安装成功后就可以在cmd里面查看当前的版本号 node -v（npm -v） 2.接下来就可以安装vue脚手架 npm install -g vue-cli # 只需要第一次安装时执行 vue create my-project # 使用vue 创建一个vue项目 cd my-project #进入到项目目录中(一定要进入到创建的目录中) npm install # 下..
使用VUE脚手架搭建VUE项目
weixin_45508558的博客
08-05 1931
1、新建文件夹 2、进入新建的文件夹，输入npm i @vue/cli -g 或者：npm i "@vue/cli" -g 3、检查是否安装vue-cli : vue -V 会显示脚手架vue-cli的版本@vue/cli xxx 4、创建项目： vue create name---在之前创建的目录中创建 选择default-----按回车键 5、启动项目： 1）进入当前文件目录 2）npm run serve 3）在浏览器输入：http://localhost:显示的端口号 6..
vue-cli 4 快速构建一个 Vue 项目
Demo_Null
07-14 3419
用了大半年的 vue 由于项目架构不是自己搭建，对于整个项目结构还是比较模糊，记录一下搭建过程
使用vue-cli快速创建vue3项目
anfuren的博客
12-08 203
条件： npm 更至最新 node >=8.9 1.全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli 2.查看版本/是否安装成功 vue -V (V要大写) 3.然后在文件夹下面cmd 输入 vue create my-peoject Default ([Vue 2] babel, eslint) //创建默认vue2 Default (Vue 3 Preview, ([Vue 3] babel, eslint))
小白如何用vue脚手架搭建vue项目-详细步骤解读
两眼一睁 神志不清
11-10 2064
突然热血来潮，实操了一把vue脚手架搭建全新vue项目，现将详细步骤贴出 一.node环境安装。 用vue-cli构建的项目是以node.js为基础的，可以理解为node.js是vue项目再构建时需要用到的环境。无论是本地serve还是打包编译都与其有密切关系，总体说node.js为前端工程化提供了必要条件。之前看到过vue.js、webpack实现、node.js三者的关系：vue.js工程化=>webpack实现=>node.js(webpack基础) 1.下载地址：https://node
如何搭建一个Vue脚手架（vue-cli）并创建一个项目？
闫小样丶的博客
10-08 2281
今天尝试着自己重新下载node和npm，并配置环境；搭建vue脚手架，实现并创建一个vue项目。所以，把整个操作流程详细的记录一下，方便后期自己参考。 一、安装nodejs环境 官网下载地址：https://nodejs.org/en/ 具体安装步骤见地址：NodeJS、NPM安装配置步骤(windows版本) 安装完成后，打开cmd，输入指令： node -v npm -v ...
必备-10.@vue/cli
pinganaaa的博客
12-05 1276
必备-10.vue/cli vue-cli是什么 vue/cli(Command Line Interface):vue的命令行接口，我们称之为脚手架,其作用是帮助我们快速生成一个可以放到服务器上的项目 使用网址：https://cli.vuejs.org/zh/guide/installation.html vue-cli创建一个项目 第一步:安装@vue-cli 使用vue必须有nodejs 安装nodejs：(https://nodejs.org/en/) 验证 node -v(v
projeceDemo1-借助@vue/cli包创建脚手架项目
weixin_45371730的博客
12-07 304
前言:借助于@vue/cli包提供的脚手架搭建项目,可以让我们快速搭建项目基本环境.Vue官方提供的脚手架是一套标准的文件夹+文件结构+webpack配置,可以做到零配置开箱即用十分便捷 前置准备:你的电脑一定要装过node或者yarn 接下来就进入创建项目步骤啦~~ 一、全局安装@vue/cli模块包 1.安装@vue/cli全局模块包,得到Vue命令,以后就可以用vue命令创建脚手架项目 //yarn 命令 yarn global add @vue/cli //npm 命令 npm inst
快速上手：Vue脚手架搭建Vue-webpack项目指南
本文详细介绍了如何使用vue脚手架工具（vue-cli）来搭建一个基于webpack的vue项目，这对于初学者和需要高效开发的企业级vue应用开发者都非常实用。以下是关键知识点的详述： 1. **Node.js环境准备**： - 首先确保...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值