Vue脚手架创建步骤

最新推荐文章于 2024-04-22 09:57:47 发布

小付丶

最新推荐文章于 2024-04-22 09:57:47 发布

阅读量785

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_39440154/article/details/124259540

版权

本文详细介绍了如何一步步安装和配置Webpack，安装Node.js，设置npm淘宝镜像，全局安装Vue CLI，创建Vue2或Vue3项目，并启动项目进行预览。通过这些步骤，读者将能够成功建立并运行一个Vue.js应用。

摘要由CSDN通过智能技术生成

1.安装webpack

2.安装node.js

3.配置npm淘宝镜像

命令：npm config set registry https://registry.npm.taobao.org

4.全局安装@vue/cli

命令：npm install -g @vue/cli

5.创建vue2或vue3项目

在需要创建项目的目录下打开cmd。输入命令：vue create 文件名(随便起英文名，最好是和项目见名知意）

6.启动项目

进入项目目录打开cmd,或在cmd中cd进入项目，然后输入npm run serve

复制地址http://localhost:8080/或 http://192.168.0.103:8080/，粘贴到浏览器中即可浏览页面

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小付丶

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

使用Vue脚手架创建Vue项目

m0_70955866的博客

11-04

471

5. 检查你是否安装vue/cli,只需要在命令行运行vue指令,如果不报错,则说明安装成功。Vue脚手架隐藏了所有的webpack相关的配置,若想查看具体的webpack配置,请执行。在弹出的选项中,选择你需要安装的配置项: 通过上下键进行切换,通过空格键进行是否选中。在弹出的选择中,表示是否是使用history方式创建路由:默认,选择y。参考:资料/vue.js环境搭建.docx。vue create 项目名。

vue脚手架搭建步骤.docx

01-01

### Vue脚手架搭建步骤详解 #### 一、前言 Vue.js 是一款非常流行的前端框架，它以其轻量级且强大的功能深受开发者喜爱。为了更高效地开发Vue项目，通常我们会采用Vue CLI (Command Line Interface) 工具来帮助...

参与评论您还未登录，请先登录后发表或查看评论

vue脚手架搭建流程图

12-01

总结vue脚手架搭建的流程，以及本人在搭建过程中遇到的bug

vue-cli 脚手架总结

akya8707的博客

07-18

163

> vue-cli 的脚手架项目模板有browserify 和 webpack , 现在自己在用的是webpack , 官网给出了两个模板： webpack-simple 和 webpack 两种。两种的区别在于webpack-simple 没有包括Eslint 检查功能等等功能，普通项目基本用webpack-simple 就足够了. 搭建官方项目模板步骤：　　1、n...

Vue脚手架搭建流程

weixin_39282845的博客

03-03

291

Vue脚手架搭建流程在创建vue脚手架的过程中，会使用到npm包管理工具。这个npm包管理工具是集成在node.js中的。 1.首先安装node.js 从node官网下载并安装node，只需要默认就ok 安装完成后，在cmd中输入node -v，测试node.js 是否安装成功。出现对应版本号，说明安装成功。在输入npm -v也会出现对应的版本号（因为npm集成在node.js中） 2....

vue脚手架搭建流程

weixin_45695200的博客

09-11

142

1、安装node.js 2、全局安装vue-cil，也就是所谓的脚手架 npm install -g vue-cli 3、生成项目首先需要用cd指令进入项目目录进行搭建项目的文件夹配置完成以后，可以看到目录下多出一个项目文件夹，里面就是vue-cli创建的一个项目 4、进入项目目录安装一些需要的插件 5、npm run dev 启动项目 6、项目开发完成之后，可以输入 npm run build 来进行打包工作。打包完成后，会生成 dist 文件夹。项目上线时，只需要将 dist 文件夹放到服务器

vue-脚手架创建

最新发布

qq_43826626的博客

04-22

1315

脚手架是什么呢，就是vue自动创建脚手架的项目模板，用于搭建项目的整体骨架，就比如后端开发时，咱们可以创建一个空项目，一步步创建为mvc项目，但是vs封装了mvc的框架，我们可以直接生成整体框架，其中包括基础包和一些重要文件，脚手架的创建也是同样的效果。

Vue脚手架创建

~Mysunny的博客

10-15

200

1 全局安装@vue/cli npm install -g @vue/cli 2 切换到想要创建项目的目录，然后执行下面的命令 vue create xxxx(projectName) 3 启动项目 npm run serve 如果npm下载过慢，可以配置淘宝镜像： npm config set registry https://registry.npm.taobao.org 脚手架文件分析 node_modules public favicon.ico..

vue脚手架的创建

AyayaOVO的博客

05-21

272

使用vue-cli创建模板项目什么是vue-cli 　是vue官方提供的脚手架工具。　脚手架工具简单讲就是自动将项目需要的环境、依赖等信息都配置好。全局安装vue-cli （1）检查npm 版本，建议安装到最新版本。 node -v npm -v (是否升级npm) npm install -g npm (是否修改淘宝镜像) npm config set registry "https://registry.npm.taobao.org"

vue 脚手架的搭建过程

qq_37469931的博客

09-02

178

1、安装node.js 2、下载 cnpm 目的是安装时速度提升，下载路径如下： npm install -g cnpm --registry=https://registry.npm.taobao.org 3、搭建vue开发环境，安装vue脚手架工具，官方命令提示： npm install --global vue-cli 或者 cnpm install --global vue-cli 4、创建项目 vue initwebpack-simple...

Vue 脚手架的搭建流程

王飞

05-19

595

文章目录准备工作安装脚手架快速原型的开发卸载脚手架转义工具运行vue文件创建项目UI界面操作命令行工具创建项目是否使用淘宝镜像选择创建方式准备工作在开始搭建脚手架之前，我们需要检查电脑环境，node的版本不能过低，版本过低可能会出现报错，如果你的node版本在8.9以下，建议你卸载安装8.9以上的版本。安装脚手架 打开命令窗口，全局安装脚手架，用于生成项目。 npm install -g @vue/cli 快速原型的开发可以直接去运行一个独立的vue文件。 install -g @vue/cli-s

Vue——创建Vue脚手架

m0_53912558的博客

02-19

606

a.安装全局@vue/cli(仅第一次执行，只需要在第一次创建脚手架的时候执行一次，电脑上会多出来一个全新的命令vue，以后创建脚手架时只需要呼唤vue，以后都不需要执行)1)Vue CLI使用的前提Node.js、webpack（npm install webpack -g全局安装）。脚手架作用是创建项目的初始文件，本质是方案的封装。b.执行下列命令，在执行过程中遇到一些警告属于正常现象，如果遇到卡顿的情况按一下回车就行。这是Vue为你准备的hello world组件，到此vue脚手架创建完毕。

vue脚手架的搭建详细过程

脑瓜疼儿的博客

01-21

208

自行下载阅读

VUE脚手架搭建项目流程

u013487114的博客

07-25

445

一、安装环境搭建（1）安装node.js 从node官网（https://nodejs.org/en/）下载并安装node，安装完成之后，打开命令行工具输入命令node -v,如下图，出现对应版本号就说明安装成功了到这为止，node的环境已经安装完了，npm包管理工具也都有了，但是由于npm的服务器是外国，有时候我们安装“依赖”的时候很慢，为了更快更稳定，所以需要用这个...

创建vue 脚手架步骤

08-17

创建Vue脚手架的步骤如下： 1. 首先，确保你已经安装了Node.js。你可以在Node.js官方网站上下载并安装最新的稳定版本。 2. 打开命令行工具，在命令行中输入以下命令来安装Vue脚手架： ``` npm install -g @vue/cli ``` 这将全局安装Vue的命令行工具，也就是Vue脚手架。安装完成后，你就可以在命令行中使用`vue`命令了。 3. 创建一个新的Vue项目。你可以在命令行中进入你想要创建项目的文件夹，并输入以下命令： ``` vue create my-vue-project ``` 这将使用Vue脚手架创建一个名为`my-vue-project`的新项目。在执行这个命令时，你可能会被要求选择使用Vue 2还是Vue 3来编写代码，根据你的需求进行选择。123 #### 引用[.reference_title] - *1* [vue脚手架搭建流程](https://blog.csdn.net/ermaner666/article/details/78995234)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Vue创建脚手架的步骤（简单详细）](https://blog.csdn.net/xiaowuwjw/article/details/123217741)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]