这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

一、vue脚手架

1.简介

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。

2.命令行操作步骤

npm install -g @vue/cli 安装3.x版本的vue脚手架
vue -V 测试是否安装成功
vue create 项目名 (注意不要用中文和特殊字符)
cd 项目名
npm run serve

从vue create my-project为例展示截图

最后cd到你自己创建的项目中,npm run serve把项目跑起来即可。此时跑起来后就会显示下面的界面

此时我们在浏览器输入上面提示的网址,显示效果如下:

3.图形界面操作步骤

vue ui (命令行输入此命令,打开一个界面化的操作平台)

此时显示效果如下:

自己创建项目并命名

创建好项目以后,我们点击任务中的启动按钮,可以启动服务也可以关闭项目。

 

启动以后我们访问localhost:8000也能正常打开我们刚才创建的项目,此种方式更方便和快捷。

二、修改配置

如果我们需要启动服务的时候自动打开浏览器,我们可以在项目的根目录下面手动创建vue.config.js,配置如下:

module.exports = {
devServer: {
open: true
// port: 8888 如果有需要可以更新端口号
}
};

本文转载于:

https://blog.csdn.net/sjs1766349405/article/details/121951565

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--vue脚手架的更多相关文章

  1. 用vue脚手架创建bootstrap-vue项目

    用vue脚手架创建bootstrap-vue项目 框架的地址:https://bootstrap-vue.js.org/docs/ 第一步 vue init webpack demo第二步 cd de ...

  2. vue脚手架中使用Vant,实现自动按需引入组件,并将px转换为rem

    偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...

  3. 前端开发3年了,竟然不知道什么是 Vue 脚手架?(下)

    上一篇文章<前端开发3年了,竟然不知道什么是 Vue 脚手架?(上)>介绍了什么是脚手架,以及Vue-cli 2.x如何创建项目,创建的项目结构.这篇文章介绍 Vue-cli 3.x 如何 ...

  4. 【vue系列之一】使用vue脚手架工具搭建vue-webpack项目

    对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一 ...

  5. vue脚手架使用swiper /引入js文件/引入css文件

    1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

  6. 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...

  7. Vue脚手架(vue-cli)安装总结

    单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. 提供一 ...

  8. Vue脚手架搭建项目

    全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...

  9. npm——安装教程、安装vue脚手架

    npm:是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题.比如常用的有: 1)允许用户从NPM服务器下载别人编写的第三方包到本地使用. 2)允许用户从NPM服务器下载并安 ...

  10. 搭建vue脚手架---vue-cli

    vue-cli作为一款mvvm框架语言(vue)的脚手架,集成了webpack环境及主要依赖,对于项目的搭建.打包.维护管理等都非常方便快捷.我们在开发项目时尤其需要这样一个快速构建项目的工具. 以下 ...

随机推荐

  1. Office Online Server Windows Server 2016 部署

    一.准备"武器" 本文是通过虚拟机搭建 OOS 测试环境的,4567是3的前提,武器提取 le73 1.VMWare Workstation 17 Player 2.Windows ...

  2. Linux进程通信 | 信号

    一.什么是信号? 信号就像是一个突然的电话铃声,它会打断正在进行的程序并引起其注意. 在Linux系统中,信号是一种软件中断,它通常是异步发生的,可以用来通知进程某个事件已经发生..每个信号都有一个唯 ...

  3. nginx配置反向代理缓存

    说明 最近运维一个网站里面含有不经常变化的小图片,而每次请求都需要调用file接口获取不太合适.所以就想利用nginx的反向代理缓存来减轻服务接口的请求压力. 工作原理 Nginx反向代理缓存,当客户 ...

  4. C++ 多线程的错误和如何避免(13)

    在 async 任务中抛出的异常会被 std::future::get() 触发 #include <future> #include <iostream> int main( ...

  5. 从图纸到BIM到数字孪生城市(元宇宙),易如反掌!

    当智能建模平台与虚幻引擎相遇时,它们又能碰撞出怎样的火花呢? 智能建模怎么玩? 以南昌某职业学院项目为例,这个项目总共有16栋楼,我们直接用智能建模平台"bim.zonst.com" ...

  6. 【Android 逆向】【攻防世界】easy-dex

    这一题不easy,不知为何叫这个名字.... 1. apk 安装到手机,不知所云,各种亮瞎眼闪光 2. jadx 打开apk,一行java代码都没有,打开AndroidManifest看看 <? ...

  7. Kotlin 基础入门

    目录 一.基础语法 1.1 常见数据类型 1.2 变量 1.2.1 变量声明 1.2.2 类型推断 1.2.3 Null 安全 1.2.4 面向对象语言 1.3 流程控制 1.3.1 if 表达式 1 ...

  8. Advanced .Net Debugging 2:CLR基础

    一.简介 这是2024新年后我的第一篇文章,也是我的<Advanced .Net Debugging>这个系列的第二篇文章.这篇文章告诉我们为了进行有效的程序调试,我们需要掌握哪些知识.言 ...

  9. 【Java复健指南11】OOP高级02-代码块、单例设计和final关键字

    代码块 定义 代码化块又称为初始化块,属于类中的成员[即是类的一部分]. 类似于方法,将逻辑语句封装在方法体中,通过{}包围起来. 但和方法不同,没有方法名,没有返回,没有参数,只有方法体, 而且不用 ...

  10. 【Azure 应用服务】"App Service"如何能判断自身网路没有问题?

    问题描述 当创建了一个App Service服务后,如何能判断服务自身网络链路路没有问题? 如果是用VM,通常用Ping可以判断.但是"网站应用App Service" 的Kudu ...