vue-cli 初始化vue工程

最新推荐文章于 2025-07-06 23:39:56 发布
最新推荐文章于 2025-07-06 23:39:56 发布
阅读量186 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue.js css node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wz_cmyc/article/details/120665566
本文介绍了如何通过VueCLI创建一个新的前端工程。首先，需要全局安装VueCLI，然后使用`vue create`命令创建项目，手动选择特性，如Vue版本、路由模式、CSS预处理器和校验工具等。在配置完成后，运行`npm run serve`启动项目，验证工程创建成功。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用 Vue CLI 初始化工程


VueCLI 创建或者升级

npm install --global @vue/cli

创建工程

  1. 创建命令

    	vue create vuetemplate

  2. 上、下键选择 Manually select features
    在这里插入图片描述

  3. <空格> 键选择工程特性
    在这里插入图片描述

  4. 选择vue版本
    在这里插入图片描述

  5. 是否使用 history 路由模式，这里输入 n 不使用 在这里插入图片描述

  6. 选择 CSS 预处理器
    在这里插入图片描述

  7. 选择校验工具
    在这里插入图片描述

  8. 选择在什么时机下触发代码格式校验
    在这里插入图片描述

  9. 配置文件单独保存成文件
    在这里插入图片描述

  10. 是否保存以上配置，根据自己情况而定
    在这里插入图片描述

  11. 工程创建
    在这里插入图片描述

  12. 验证

    cd vuetemplate
npm run serve

    工程创建成功在这里插入图片描述

vue学习笔记（一）：使用 vue cli 初始化项目
name_lsc的博客
01-20 1438
安装 vue-cli vue 官方提供了 vue-cli 用于创建工程化的 vue 项目，vue 的脚手架需要先全局安装，前置条件是电脑中需要有安装 node 环境 $ npm install @vue/cli -g or $ yarn global add @vue/cli 运行命令检查脚手架是否安装完成，如果简写的话，V是大写的 $ vue -V or $ vue --version 如果正常安装的话，运行上面检测安装完成的命令后，应该是如下结果： @vue/cli 4.5.15 （4.5.15代
Vue环境安装、Vue-cli安装、初始化项目
Jackson_ji的博客
04-29 728
隔了近7月没敲过代码，连最初的Vue项目初始化都忘记了，今天有时间，回忆下；之后有时间还是天天的看会，不能忘了吃饭的家伙啊~~~~ Vue环境安装 1、安装node.js（版本不得低于8）全局安装，下载node的链接路径https://nodejs.org/en/，选择带有Current的安装；步骤只需next next就行，没有确认的规范；安装的盘符，你可以自己选择，之后检查node是否安...
vue-cli初始化
Kevin李宏飞的博客
11-21 652
vue create vue-cli-demo
初始化创建Vue项目步骤
Tc、zyh的博客
06-10 8302
一、项目创建 1.安装 node和npm 1.首先安装node，因为都已经安装过node了，所以npm自带。 1.检查node版本 node -v 2.检查npm 版本 npm -v 2.国外的npm地址太慢，切换npm国内镜像 npm config set registry=https://registry.npm.taobao.org/ 3.查看地址是否成功可以通过npm config get registry npm config get registry 2.安装 vue-cli 脚手
Vue 脚手架CLI 初始化项目
有勇气的牛排博客
02-07 1413
1 介绍 CLI是Command-Line Interface，翻译为命令行界面，但是俗称脚手架。 Vue CLI是一个官方发布vue.js项目脚手架 使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置。 使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置 2 Vue CLI使用前提 Webpack Vue.js官方脚手架工具就使用了webpack模板 对所有的资源会压缩等优化操作 它在开发的过程中提供了一套完整的功能，能够使得我们开发
vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件
05-30
init-config : 初始化vue.config.js & Views.json两个文件到你的项目 build-multi : 并行构建多个页面 watch-multi : 并行观看多个页面 你可以在你的项目中使用vue-cli-service [command] 初始化配置 如果你的项目...
vue-cli初始化项目中使用less的方法
10-18
在 Vue CLI 初始化的项目中集成 Less 作为 CSS 预处理器，可以使样式代码更易于管理和维护，利用 Less 的变量、嵌套规则、运算符等功能提升开发效率。 Less 是一种 CSS 预处理器，它允许开发者使用变量、嵌套规则、...
Vue使用vue-cli创建项目
01-19
本文介绍了Vue使用vue-cli创建项目，分享给大家，具体如下： vue-cli 是一个官方发布vueJS项目脚手架：https://github.com/vuejs/vue-cli 我创建的模板项目：...
vue-cli开发的商城源代码
01-18
- `main.js`：应用的入口文件，导入并初始化Vue实例。 2. `public` 目录：通常存放静态资源，如 favicon、index.html 文件等。 3. `package.json`：记录项目依赖和脚本，如启动开发服务器、构建生产环境代码的...
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
08-27
它简化了项目的配置，提供了预设（preset）来快速初始化项目。在本文中，我们将详细讲解如何使用 Vue CLI 构建项目，以及如何在项目中使用 axios、Sass 和 Swiper。 首先，我们来安装 Vue CLI： ```bash npm ...
Vue.js之使用vue-cli初始化项目
Baby_加油_的博客
06-11 1412
使用vue框架的时候，经常会用到vue的脚手架，那么怎么进行初始化呢？ 一、安装步骤 step1、安装Node.js 首先需要下载并安装Node.js，下载地址：Node官网。 测试安装是否成功，打开cmd，使用 node -v，如果显示版本号则表示安装成功。 step2、安装vue-cli 使用vue-cli（脚手架）搭建项目，vue-cli是Vue官方提供的用于搭建...
（一）vue-cli初始化项目并引入ElementUI
澜岚伊人的博客
11-04 7171
摘要： 写过了一个我们产品的后台管理系统，但做完项目都没有进行总结。感觉好多还是懵懂的感觉，所以想要重新走一遍，写一个自己的项目。让自己理清思路 实现： 1、首先确认你的电脑中已经安装过Node.js了，如果没有可以百度安装配置 2、我们来说下安装vue，是用vue-cli来初始化项目吧（使用命令行工具来操作） （1） 全局安装 vue-cli (在命令行工具中输入npm install...
vue-cli初始化项目
qq_29236119的博客
03-30 830
初始化项目时首先要弄清楚vue-cli的版本 一、3.0以下版本命令 1、首先安装vue-cli，输入命令： cnpm install -g vue-cli 2、初始化项目，输入命令 vue init webpack my-project 二、3.0以上版本（推荐使用） 1、首先安装vue-cli，输入命令： cnpm install -g @vue/cli 2、初始化项目，输入命令 vue create my-project 需要注意的是vue-cli低版本和高版本的命令是不一样的，低版本的vue
使用vue-cli2.0和vue-cli3.0初始化项目
Royal_json的博客
04-23 1329
1、使用vue-cli@2.0构建webpack项目 第一步：使用 npm install vue-cli -g //全局安装 vue-cli 脚手架 第二步：安装vue-cli成功后，通过cd命令进入你想放置项目的文件夹，在命令提示窗口执行创建vue-cli工程项目的命令：vue init webpack + 项目名称。确认创建项目后，后续还需输入一下项目名称、项目描述、作者、打包方...
Vue cli 脚手架安装和Vue项目创建过程
wzsrlndm的博客
09-28 159
在电脑搜索框中数如cmd打开命令提示符 然后可以在里面输入node -v注意是node空格-v 如果 执行结果显示： xx 不是内部命令，说明你还没有安装node , node 安装地址：下载 | Node.js 中文网 vue-cli安装 ...
使用vue-cli初始化 vue项目，并且运行项目
Robin的博客
02-21 2007
1、创建一个文件夹专门存放vue项目 2、打开vscode 通过vscode打开文件夹 3、点击顶部菜单栏查看-》终端 打开vscode的命令行窗口 4、运行命令 vue init webpack 项目名称 runtime+这个提示内容是推荐使用一个运行时编辑器 直接回车继续往下 以上是提示 是否安装Vue.js路由，输入y表示是，n表示否，一般项目中都会使用，所以输入y之后回车 以上提示是否使用ESLint管理代码，EsLint是代码风格管理工具，可用来统一代码风格...
Vue+Openlayers加载OSM、加载天地图
最新发布
blucod的博客
07-06 380
npm i ol。
深入理解 Vue.js 响应式原理及其在 Web 前端开发中的应用
2301_79858914的博客
07-06 350
Vue.js 的响应式系统是其核心特性，通过数据劫持、依赖收集和派发更新实现数据变化时的自动更新。Vue 2.x 使用 Object.defineProperty 监听数据变化，通过 Observer 类递归观察对象属性，Dep 类管理依赖关系，Watcher 类连接数据和视图。对于数组，Vue 重写了原生数组方法来实现响应式。这套机制使得开发者只需关注数据变化，无需手动操作 DOM，大大简化了前端开发流程。理解响应式原理有助于开发者更高效地使用 Vue 并优化应用性能。
v-bind指令
Yqha1的博客
07-02 757
Vue 3 v-bind 指令核心摘要 v-bind 是 Vue 实现数据驱动的核心指令，用于动态绑定 HTML 属性和组件 props。主要功能包括： 基础绑定：通过 :属性名="数据" 绑定标准属性（如 href、src） Class 绑定：支持对象/数组/混合语法动态控制样式类 Style 绑定：灵活设置行内样式，支持对象和数组语法 布尔属性：如 disabled，会根据绑定值自动添加/移除属性 属性对象：通过 v-bind="对象" 一次性绑定多个属性 （注：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值