Vue脚手架的安装搭建

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

#vue.js #javascript #webpack

本文介绍了Vue脚手架，它基于Webpack，用于快速搭建单页面应用的项目目录和结构，适合大型项目。还讲解了其基础使用，包括安装、升级、创建项目、启动服务等操作，以及项目名的命名规则和选择模板、包管理器等步骤。

1. vue脚手架是什么？

  1. 它是一个专门为单页面（SPA）应用快速搭建繁杂的脚手架，它是基于webpack的基础开发出来的一款能够快速的帮助我们构建一个用来开发vue的项目目录、结构（vue和webpack的项目模板）。
  2. vue脚手架通常使用在大型项目中，能够加快我们的开发速度。而小型项目不推荐使用脚手架，因为反而会拖慢我们项目的开发速度

2.  脚手架的基础使用与理解：

   安装/升级 ：

//安装

npm install -g @vue/cli//

//升级

npm update -g @vue/cli

//查看当前脚手架版本

vue -V

//安装指定版本

npm i -g @vue/cli@版本号

脚手架创建项目-启动服务

1.创建项目 （注意: 项目名不能带大写字母, 中文和特殊符号）

# vue和create是命令, vuecli-demo是自己的文件夹名
   vue create vuecli-demo

2.选择模版（可以上下箭头选择, 回车确定, 弄错了ctrl+c从第1步来）

 

3.选择包管理器

4.等待下载脚手架项目, 需要的依赖包

5.按照步骤运行两行代码-开启服务器

 脚手架目录分析

 

Issssy
关注
最全vue脚手架搭建教程
suny8的专栏
06-23 1337
Vue CLI是一个基于Vue.js进行快速开发的完整系统，可以自动生成Vue.js+ webpack的项目模板。Vue CLI提供了强大的功能，用于定制新项目、配置原型、添加插件和检查webpack配置。@vue/cli3.x版本可以通过 vue create 命令快速创建一个新项目的脚手架，不需要像vue2.x那样借助于webpack来构建项目。
超详细的Vue学习之Vuejs脚手架安装配置教程，包括安装配置Node.js
H.千面的博客
08-11 405
教程博客： 1、Vuejs脚手架安装配置教程_weixin_45753168的博客-优快云博客_vue.js配置脚手架 2、Vue学习之vue-cli脚手架下载安装及配置 - cls超 - 博客园 3、如何运行vue项目（维护他人的项目） 注意： 1、 配置过程中，尽量不要直接复制粘贴教程里的配置，因为在配置语句后面有回车，粘贴后默认执行，配置错误的话，更改会稍微有点麻烦 2、 若设置全局缓存的安装位置或全局模块的安装位置出错，在C盘用户目录下的.npmrc中修改： 注意不是安装目录Node.js
vue脚手架安装
sl105105的博客
08-03 342
通过npm run build把写好的代码文件打包，会生成一个dist文件，dist文件的内容就是html 和 js 还有css，我们之前开发使用前端工程化，最后项目上线还是打包压缩成html js和css， 最后再把dist里面的文件放到服务器的根路径下，启动服务器，就可以在本地跑起来了，如果是线上的服务器，那么就代表前端发布成功了。 ...
Vue脚手架的安装（超详细篇，保姆级教程）
热门推荐
cfjbcg的博客
08-06 1万+
打开一下你刚刚的安装目录nvm，双击打开，找到settings.txt，然后用记事本编辑打开，复制粘贴。nvm install 14 nvm install latest // 安装最新版本node。-g的意识是全局安装，就-g和-s，-s是局部安装，就是只在当前项目可以使用。这边的安装版本可以跟我的一样，安装16.20.2和14.21.3的版本。可以看到这个就说明你刚刚安装的版本成功了！16版本的node就是跟着8版本的npm。14版本的node就是跟着6版本的npm。在这边进行项目的运行，快捷键。
vue脚手架搭建
weixin_54711921的博客
11-12 1033
第一步：查看node 版本号 如果低于 版本10 的话安装最新版node 如果没有cnpm 的话 需要安装cnpm 如果已经安装过cnpm 可以跳过 安装cnpm的命令是： npm install -g cnpm --registry=https://registry.npm.taobao.org 第二步：cmd终端中安装vue脚手架 cnpm i @vue/cli -g 安装成功后可以执行 vue -V (注意：-V 是大写) 查看vue版本号 来检测是否成功 第三步： 创建项目： 在想要创建项目的文
【Vue】Vue脚手架安装搭建
萌狼蓝天の技术栈
02-28 425
Vue脚手架安装搭建 操作系统：Windows 11 专业工作站 记录时间：2022年2月18日 在安装之前，需要安装node.js(Node.js (nodejs.org))，否则无法使用npm 安装 npm i -g @vue/cli 升级 npm update -g @vue/cli 查看当前脚手架版本 vue -V 安装指定版本脚手架 npm i -g @vue/cli@版...
精选资源
Vue脚手架环境搭建.pdf
11-03
本文将详细介绍如何通过Vue脚手架工具来构建Vue项目的开发环境。 首先，我们需要安装Node.js，这是Vue.js开发的基础。Node.js是一个开放源代码、跨平台的JavaScript运行环境，用于在服务器端执行JavaScript代码。你...
vue脚手架搭建过程图解
08-27
至此，Vue脚手架搭建已完成。Vue CLI会自动配置Webpack，提供热重载、源码映射等功能，极大地提高了开发效率。随着项目的进行，你可以添加更多的Vue插件和库，通过Vue CLI的`vue add`命令，例如添加Vuex状态管理或...
【Vue五分钟】 Vue Cli脚手架安装配置
Lushengshi的博客
08-26 446
这个脚手架的安装很多博主可以在C站介绍，大家都可以所以搜索查看，我们这边只是小小的学习记录总结，补习勿喷哦！！！都是自己安装的，有雷同，纯属巧合！
Vue脚手架的安装配置以及使用
hubertbb3的博客
12-19 291
安装Vue脚手架 1.需要安装nodejs支持 去nodejs官网下载对应版本的nodejs，可以使用installer，选择安装目录点击安装，也可以使用binary文件，直接选择文件夹解压缩。 安装完成后如上图所示。 然后配置环境变量： 1：添加NODE_PATH,变量值为nodejs的安装路径. 2添加Path属性，新增两天记录 打开cmd窗口测试，输入node -v，nmp -v如果出现以下结果代表安装完成。 2,。设置node_cache 和 node_globel 创建完两个空文件夹之后
怎样安装vue脚手架
夏天的博客
12-14 299
输入cmd,先打开命令行控制窗口 1.先检查是否安装了node环境：node-v 下载地址：https://nodejs.org/ 2.安装脚手架：npm install -g vue-cli 3.切换到放文件名的目录：cd /d 目录路径 4.vue项目初始化：vue init webpack 创建的项目文件夹名称 5.安装项目依赖：npm stall 6.运行命令：npm start 或 npm run dev ...
如何安装vue脚手架
weixin_51063573的博客
09-15 264
安装vue脚手架 1.先安装node.js 官网下载：http://nodejs.cn/download/ 2.测试node.js是否安装成功 win+R打开运行，输入cmd回车，在cmd中输入node -v 看到版本号，则说明已安装成功 3.测试npm是否自动安装 如上运行 命令 npm -v 4.配置下载源，全局安装nrm 执行命令 npm install nrm -g 5.使用taobao镜像源 查看镜像源，然后使用镜像源 nrm ls nrm use taobao 6.安装脚手架 np
安装vue脚手架
LUiS36的博客
04-17 146
安装vue脚手架的操作步骤
vue/cli脚手架安装指定版本
qq_16488609的博客
05-08 8856
注意：要用管理员打开cmd 查看当前版本命令：vue -V 原因： 4.0 由于版本过高 很多插件不支持所以卸载高版本 指定低版本 卸载当前脚手架 ：npm uninstall -g @vue/cli 安装指定版本：npm install -g @vue/cli@版本号 这里我采用了 vue cli3 的最高版本 3.12.1命令为：npm install -g @vue/cli@3.12.1 成功后 ...
vue脚手架怎么搭建
最新发布
09-17
Vue 脚手架的搭建通常指的是使用 Vue CLI（命令行工具）来快速初始化一个 Vue 项目。Vue CLI 提供了开箱即用的项目结构、构建工具（如 Webpack）、以及可选的 Babel、TypeScript、PWA 支持等功能。 以下是使用 Vue CLI 搭建 Vue 脚手架项目的完整步骤： --- ### ✅ 步骤 1：安装 Vue CLI 确保你已经安装了 Node.js 和 npm。你可以通过以下命令安装 Vue CLI： ```bash npm install -g @vue/cli ``` > 如果你使用的是 yarn： ```bash yarn global add @vue/cli ``` --- ### ✅ 步骤 2：创建项目 使用 `vue create` 命令创建一个新的项目： ```bash vue create my-project ``` 然后你可以选择预设配置： - **默认配置（Default）**：包含 Babel 和 ESLint - **手动配置（Manually select features）**：你可以选择需要的功能，如： - Babel - TypeScript - Router - Vuex - CSS 预处理器（如 Sass、Less） - 单元测试 - E2E 测试 选择完成后，Vue CLI 会自动安装依赖。 --- ### ✅ 步骤 3：进入项目目录并启动开发服务器 ```bash cd my-project npm run serve ``` > 或使用 yarn： ```bash yarn serve ``` 此时你可以访问 `http://localhost:8080` 查看你的 Vue 项目。 --- ### ✅ 项目结构说明（默认） ```bash my-project/ ├── node_modules/ ├── public/ ├── src/ │ ├── assets/ │ ├── components/ │ ├── App.vue │ └── main.js ├── .gitignore ├── babel.config.js ├── package.json ├── README.md └── vue.config.js (可选) ``` - `src/main.js` 是入口文件。 - `App.vue` 是根组件。 - `components/` 存放组件。 - `assets/` 存放静态资源。 - `public/` 存放不会被 Webpack 处理的资源。 --- ### ✅ 可选：配置 vue.config.js 你可以通过创建 `vue.config.js` 文件来自定义构建配置，例如： ```js // vue.config.js module.exports = { devServer: { port: 3000, }, css: { loaderOptions: { sass: { additionalData: `@import "@/assets/scss/variables.scss";` } } } } ``` --- ### ✅ 部署项目 构建生产环境版本： ```bash npm run build ``` 构建完成后，打包的文件会放在 `dist/` 目录下，你可以将其部署到服务器。 --- ### ✅ 使用 Vue UI 管理项目（可选） Vue CLI 提供了一个图形化界面来管理项目： ```bash vue ui ``` --- ### ✅ 问题排查 - **npm 安装失败**：请检查网络连接，或使用 `npm config set registry https://registry.npmmirror.com` 使用国内镜像。 - **node-sass 安装失败**：建议使用 `sass`（Dart Sass）替代，Vue CLI 默认已使用。 - **端口被占用**：在 `vue.config.js` 中修改 `devServer.port`。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值