vue脚手架

最新推荐文章于 2025-10-13 11:04:08 发布
原创 最新推荐文章于 2025-10-13 11:04:08 发布 · 2.3k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

本文介绍如何使用Vue脚手架（Vue CLI）快速搭建单页面应用。内容涵盖Vue CLI的安装步骤、创建新项目的过程及运行本地服务器的方法。

一、什么是vue脚手架

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

二、vue脚手架的安装

1、基于node环境

查看node版本: node -V

查看npm版本: npm -V

2、全局下 安装vue-cli脚手架

npm i -g @vue/cli

npm uninstall -g @vue/cli   卸载脚手架

3、创建脚手架项目

在需要创建项目的目录下输入

vue create myvue  

 

选第三个 Manually select features

选择babel router vuex，空格选中

 

方向键选择2.x

 

输入n

 

选择第一个

 

输入n

 ce myvue  进入myvue目录

 输入npm run serve 完成配置

本机地址即为： http://localhost:8080/ 

 

TashuoLhy
关注
vue.js 脚手架
07-31
该代码为vue脚手架源码，也可以自己搭建，步骤简单，点击dev.bat即运行
vue脚手架（纯净版）
07-10
Vue脚手架（Vue CLI）是官方提供的一个命令行工具，旨在简化Vue项目的搭建和配置过程，让开发者能够快速启动新项目。"vue脚手架（纯净版）"通常指的是剥离了某些非必要插件或预设，只保留基础功能的CLI版本，以满足...
Vue 脚手架
Errol's Blog
03-30 8666
Vue 脚手架
Vue 脚手架（Vue CLI）
最新发布
2403_87892684的博客
10-13 986
学校名称{{ SchoolName }}</div>//有个点击事件<button @click="sendSchoolName">把学校名字给App</button>
Vue脚手架
天道酬勤，厚积薄发
08-12 4065
Vue脚手架学习笔记
关于Vue脚手架
whisper_Java 的博客
10-17 2529
Vue Cli 全称Vue command line interface(Vue命令行接口)，俗称Vue脚手架， 是Vue官方提供的一个标准化开发工具(开发平台)。可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】Vue CLI最新版本是4.x，目前处于维护模式其优点1. 开箱即用，零配置2. 内置babel等工具3. 标准化的webpack配置。
vue脚手架vue脚手架vue脚手架vue脚手架vue脚手架
04-26
Vue脚手架（Vue CLI）是Vue.js官方提供的一个命令行工具，用于快速搭建 Vue 项目，它极大地简化了项目的初始化过程，帮助开发者设置和配置项目环境，提高开发效率。 Vue CLI 提供了丰富的预设选项，包括Webpack配置...
vue脚手架vue init webpack appname，离线webpack包
10-12
当我们使用 "vue init webpack appname" 命令时，实际上是调用了Vue的脚手架工具，这个工具能够帮助开发者快速生成一个基于Webpack构建的Vue项目结构。它不仅为我们搭建好了项目的框架，还配置好了开发环境和生产...
vue脚手架搭建项目的兼容性配置详解
12-12
使用vue-cli搭建项目，面临着解决ie兼容性问题(ie9+)，因为ie浏览器并不支持es6语法等。 首先安装babel-polyfill，解决ie不支持promise对象的问题 npm install --save-dev babel-polyfill 安装成功之后,在main.js...
vue入门---vue脚手架
yookooi
07-25 1191
vue入门---vue脚手架
vue的脚手架是什么
liulang68的博客
09-03 1万+
脚手架：可以理解为自动帮我们构建项目的工具。 vue的自动化构建工具是node.js帮我们做的，这就是我们为什么要下载node的原因。 这个vue-cli是webpack高度封装的内容。（vue-cli就是用webpack写出来的） cnpm代表的是淘宝的镜像 脚手架安装好了我们就可以创建一个项目了 vue的运行是先编译然后再显示到页面上，避免出现白屏的现象。 把vue进行实例化，然后把App放进来，然后挂载到#app上 当我们把代码写好我们就要使用npm run build打包编译出来，我们会发现多了
何为vue脚手架?
HHR_hr的博客
07-06 2531
自动生成项目模板运行和开发。
Vue开发项目入门——Vue脚手架
热门推荐
m0_67495466的博客
04-12 3万+
Vue脚手架是Vue官方提供的标准化开发工具（开发平台），它提供命令行和UI界面，方便创建vue工程、配置第三方依赖、编译vue工程。
vue脚手架vue-cli
码农的世界
12-17 3470
安装vue-clinpm install -g vue-cli使用vue-cli初始化项目vue init webpack my-project进入到目录cd my-project安装依赖npm install开始运行npm run dev
使用Vue CLI脚手架上（22th）
山雀的博客
10-13 1662
初始化脚手架步骤，ref属性，props配置项，mixin混入，plugin插件，scoped样式
vue 脚手架
10-09
Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台），最新的版本是 5.x，相关文档可参考：https://cli.vuejs.org/zh/ [^1]。 使用 Vue 脚手架的具体步骤如下： 1. 仅第一次执行时，全局安装`@vue/cli`，命令为`npm install -g @vue/cli`。 2. 切换到要创建项目的目录，使用命令`vue create xxxx`（`xxxx`为项目名称）创建项目。 3. 启动项目，命令为`npm run serve` [^1]。 在`package.json`文件中，脚本配置有 `"serve": "vue-cli-service serve"`和 `"build": "vue-cli-service build"` [^2]。 Vue 脚手架的作用之一是用于父组件给子组件传递数据，其读取方式有以下几种： 1. 只指定名称，如`props: ['name', 'age', 'setName']`。 2. 指定名称和类型，如`props: {name: String, age: Number, setNmae: Function}`。 3. 指定名称、类型、必要性、默认值，如`props: {name: {type: String, required: true, default:xxx}}` [^3]。 Vue 插件是一个包含`install`方法的对象，可通过`install`方法给 Vue 或 Vue 实例添加方法，定义全局指令等 [^3]。 在项目的`main.js`文件中，会引入 Vue，创建 Vue 响应式系统，引入根组件，并把根组件渲染在挂载节点的内部，示例代码如下： ```javascript // 从node_modules中导入vue模块 import Vue from 'vue' // 导入App组件（.vue单文件组织） import App from './App.vue' // 关闭生产环境的vue提示 Vue.config.productionTip = false // 创建vue响应式系统 const app = new Vue({ // 用于把App组件渲染到#app挂载节点中去（在index.html中） render: h => h(App), }) // 挂载 app.$mount('#app') ``` [^4]
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值