Vue-01 VueCli4.5.8安装 并且启动一个vue脚手架项目

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

本文介绍 Vue CLI 的安装及使用方法，包括项目创建、运行、界面UI设置等步骤，并解释了插件与依赖的区别。

 

目录

1.概述

1.安装命令

2.创建项目

2.1创建命令

2.2执行 npm run server

2.3访问

3.脚手架界面ui

3.1命令

3.2页面

3.3导入项目

4.终止端口

5.插件

6.依赖

6.1安装依赖

 

7.配置信息

8.任务启动

8.1启动项目

1.概述

Vue-cli是Vue的脚手架工具

主要作用：目录结构、本地调试、代码部署、热加载、单元测试

1.安装命令

 cnpm i -g @vue/cli

2.创建项目

2.1创建命令

 vue create 项目名称

一路回车就好了

2.2执行 npm run server

如下

 

2.3访问

3.脚手架界面ui

3.1命令

3.2页面

3.3导入项目

如下

4.终止端口

5.插件

框架插件,辅助项目开发,不会打包到项目

6.依赖

项目依赖，需要打包到项目里面

6.1安装依赖

点击右上角安装依赖，搜索依赖安装

可以看到都已安装好了

 

7.配置信息

8.任务启动

8.1启动项目

点击启动app

 

Vue--》超详细教程——vue-cli脚手架的搭建与使用
ztK63LrD的博客
11-14 5557
它简化了程序员基于webpack创建工程化的Vue项目的工程。其好处就是简省了程序员花费时间去配置webpack，从而目标只需专注在撰写项目应用上。，基于vue-cli这个系统，我们就可以快速搭建好“（英文名：Singleagepplication）简称SPA，顾名思义指的是，所有的功能与交互都在这唯一的一个页面内完成。
vue-cli（vue脚手架）安装 详细教程
m0_54853503的博客
02-23 7286
vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。 一.安装vue-cli 1、 使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：npm install webpack -g或者（npm install -g webpack），安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。 注意：webpack 4.
@vue/cli4.5.8搭建项目的坑
shabbyaxe的博客
11-07 1498
map()
element ui点击按钮弹出款_Vue+elementUI弹出框的使用（demo代码详细分析）
weixin_39783149的博客
12-22 6184
hello你好我是辰兮很高兴能来阅读，本篇整理一下Vue+elementUI的弹出框相关用法，留给自己，也分享给初学者，一起进步！Vue+elementUI表格组件使用请参考：Vue+elementUI表格组件使用本篇是Vue+elementUI的弹框使用案例前端代码解析因为开始写Vue项目很容易遇到弹出异常弹出，前期老是有的弹出无法正常关闭。后来了解后就是一个Vue中子传父，父传子的问题 首先了...
vue-cli2.9.6更新4.5.8时卸载报错
xiatiandemutangchun的博客
10-27 438
因为3.0以上版本才支持用vue ui打开图形化界面，所以试着更新一下，但卸载的时候报错。如下图： 删完提示的vue文件，重新执行，又会提示删除别的vue文件。 实际上可以不用卸载旧版本，直接更新即可 npm install -g @vue/cli ...
Vue Cli 4x 新建初始化项目
言小溪 的博客
11-13 482
vue cli 最新版本已经出到 4.5.8 了， 以往的一些配置，命令可能都不一样了 最新的vue 项目创建不是以往的 vue init webpack “” 这样很可能会一直卡死，所以多看官方文档是很重要的。 那么我们废话不多说，开始教大家新建项目 首先更新 vue-cli npm install @vue/cli -g 创建项目 vue create 项目名 实战 新建项目 这里一路回车 等待依赖安装完成，大概100MB 左右 创建成功 运行 npm run server 打包发布 npm
vue3.0+Vue/Cli 4.5.0 项目搭建
web修理工
08-20 827
1.初见vue3.0项目 node v12.14.1 npm 6.13.4 vue/cli 4.5.0 全局安装 vue/cli npm安装 npm i -g @vue/cli yarn安装 yarn global add @vue/cli 创建vue 项目 vue create datav-project 手动配置 vue3.0 进入项目 cd datav-project !注意:增加typeScript vue-router vue-store 都是ts版本 添加 TypeScript v
精选资源
vue-cli中安装方法(图文详细步骤)
01-21
vue-cli 是vue.js的脚手架，用于快速自动生成vue.js+webpack的项目模板，这样大大降低了webpack的使用难度。下面是详细的安装步骤 vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 1、安装...
vue-cli脚手架的安装教程图解
12-02
vue-cli脚手架模板是基于node下的npm来完成安装，下面给大家介绍vue-cli脚手架的安装，具体内容如下所述： https://github.com/vuejs/vue-cli 官网 使用官方推荐的webpack 条件： node在4.以上，npm在3以上，查看...
安装vue-cli时-4058报错的解决方法
milijiangjun的博客
11-18 578
vue错误如图： 解决办法 1.终端运行以下命令 --registry https://registry.npm.taobao.org info underscore 而后运行下面的指令，从新添加vue-cli cnpm install --global vue-cli 3.终端运行下面的指令查看vue版本 vue -V 4.表示安装成功了 ...
Vue 环境的搭建笔记
qq_42717015的博客
06-16 666
搭建vue环境步骤 一：安装node.js vue的运行是要依赖于node的npm的管理工具来实现，所以搭建vue的开发环境，要先下载node.js,node可以在官网或者中文网里面下载，根据自己的电脑选择是32还是64 ，http://nodejs.cn/download/ 根据自己的情况下载后就是傻瓜方式安装 2：环境配置 这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm instal.........
【vue】如何安装vue 脚手架以及创建脚手架项目_10
青春木鱼的博客
06-23 2206
本文主要介绍如何在vue中安装脚手架以及使用脚手架创建vue项目示例。除此之外，还详细介绍了关于vue项目中解决单页面应用存在的首屏加载极慢的致命问题——首屏渲染优化的懒加载技术——异步延迟加载以及真正的懒加载的实现............
VueCLI v4.5.4 创建vue项目（手选模式创建）
热门推荐
{竹子}
09-06 2万+
创建项目 vue create v1 v1 项目名称 大意：请选择一个预设（有3个预设置） Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) Manually select features # 手动选择功能 选择 Manually select features创建 Vue CLI v4.5.4 ? Please pick a preset: Manually select fea
vue-cli 版本 4.5.4 脚手架搭建项目
lss0555的博客
08-19 2582
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
安装vue脚手架@vue/cli 4.5.13(稳定版)
分享与记录前端点滴
10-09 1万+
安装vue脚手架vue/cli@3.12.1(稳定版) 最近从0搭建一个 vue 简单的 h5 页面，还记得以前自己是用 vue-cli 2.0的版本 里面有默认配置好的webpack配置，但现在很多小伙伴都已经用最新的 @vue/cli 4+ 版本了，毕竟 @vue/cli 3 以上 的版本，比 2.0 的配置文件简洁了很多，当然你还得跟上时代的脚步，不然你就被淘汰了。但自己搭建过的小伙伴都应该知道， ...
vue-cli版本查看、更新
qq_17627195的博客
10-21 2594
vue-cli的版本查看 vue -V vue-cli的3.0+以后使用的不是vue-cli了，如果安装3.0的话就需要使用新的命令，如下： npm install @vue/cli -g vue/cli4的安装与使用 若你已安装过vue-cli3一下的版本的话，你得先卸载掉，命令如下： //首先查看是否已安装过 vul-cli 和 vul-cli 的版本 vue -V //如是有的话且版本小于3.0，就用下面命令卸载 npm uninstall vue-cli -g 安装vue-cli 3.0
vue/cli 4.5.4用命令行建设新应用
互零网络科技有限公司
08-27 868
1.开始创建项目 @ vue / cli 4.5.4安装成功后，如果要在D：\ Code2Vue目录中创建demo2项目，则可以打开资源管理器，输入D：\ Code2Vue目录，然后在资源管理器中在地址栏上输入cmd（此时打开的cmd窗口的打开目录是D：\ Code2Vue目录，如下所示），在打开的cmd窗口模式下输入以下命令： 开始创建一个新项目： # demo2 是项目名称 vue creat demo2 注意：vue creat命令在哪个目录中运行，将在哪个目录中创建vue。 2.如.
Vue-cli4.5脚手架搭建项目（零基础小白都能看懂）
08-22 1399
1.安装vue-cli npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后可以查看版本号：vue -V 如果出现版本号@vue/cli 4.5.13 那么表示安装成功 （4.5.13是我当时的最新版） 2.创建项目 vue create project (vue create+你的项目名称，project为我此次创建项目的项目名) 然后按下回车键，会显示以下界面，因为我之前有保存过名称为EIT的...
Vue CLI 4.5.7 脚手架项目的搭建、目录结构分析、Vue Router的基本使用
杰森写代码
10-17 1445
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。 官方文档地址：https://cli.vuejs.org/zh/guide/ 通过Webstorm npx方式新建一个Vue CLI脚手架项目 默认目录结构如图所示 打开命令行，使用npm ls --depth 0查看项目默认依赖 使用npm run se.
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值