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

一、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脚手架的更多相关文章
- 用vue脚手架创建bootstrap-vue项目
用vue脚手架创建bootstrap-vue项目 框架的地址:https://bootstrap-vue.js.org/docs/ 第一步 vue init webpack demo第二步 cd de ...
- vue脚手架中使用Vant,实现自动按需引入组件,并将px转换为rem
偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...
- 前端开发3年了,竟然不知道什么是 Vue 脚手架?(下)
上一篇文章<前端开发3年了,竟然不知道什么是 Vue 脚手架?(上)>介绍了什么是脚手架,以及Vue-cli 2.x如何创建项目,创建的项目结构.这篇文章介绍 Vue-cli 3.x 如何 ...
- 【vue系列之一】使用vue脚手架工具搭建vue-webpack项目
对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一 ...
- vue脚手架使用swiper /引入js文件/引入css文件
1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...
- Vue脚手架(vue-cli)安装总结
单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. 提供一 ...
- Vue脚手架搭建项目
全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...
- npm——安装教程、安装vue脚手架
npm:是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题.比如常用的有: 1)允许用户从NPM服务器下载别人编写的第三方包到本地使用. 2)允许用户从NPM服务器下载并安 ...
- 搭建vue脚手架---vue-cli
vue-cli作为一款mvvm框架语言(vue)的脚手架,集成了webpack环境及主要依赖,对于项目的搭建.打包.维护管理等都非常方便快捷.我们在开发项目时尤其需要这样一个快速构建项目的工具. 以下 ...
随机推荐
- 从零开始的react入门教程(七),react中的状态提升,我们为什么需要使用redux
壹 ❀ 引 在前面的文章中,我们了解到react中的数据由props与State构成,数据就像瀑布中的水自上而下流动,属于单向数据流.而这两者的区别也很简单,对于一个组件而言,如果说props是外部传 ...
- CF1822F Gardening Friends
题目链接 题解 知识点:树的直径,枚举. 考虑一个结论:树上任意点的最远点一定是树的直径的端点. 那么对于一个根节点,只要知道了树的直径,那么我们就可以立即得到最远距离,即乘 \(k\) 树的价值. ...
- NC22598 Rinne Loves Edges
题目链接 题目 题目描述 Rinne 最近了解了如何快速维护可支持插入边删除边的图,并且高效的回答一下奇妙的询问. 她现在拿到了一个 n 个节点 m 条边的无向连通图,每条边有一个边权 \(w_i\) ...
- 解决maven打包compliation failure程序包不存在
1.问题说明 spring boot项目,在cmd中使用mvn clean package打包报错如下: 说这个程序包不存在,而实际上在eclipse中查看是能找到的. 2.问题原因 后来看了一下这个 ...
- RMAN REPORT NEED BACKUP DAYS 5
47.You issue the following command on the RMAN prompt. REPORT NEED BACKUP DAYS 5; Which statement is ...
- 《系列一》-- 5、xml配置文件解析之[自定义]命名空间[标签]的解析
阅读之前要注意的东西:本文就是主打流水账式的源码阅读,主导的是一个参考,主要内容需要看官自己去源码中验证.全系列文章基于 spring 源码 5.x 版本. Spring源码阅读系列--全局目录.md ...
- GDI实现透明菜单位图
case WM_CONTEXTMENU: { m_hMenu = CreatePopupMenu(); g_BitMap = (HBITMAP)LoadImage(NULL, L"1.bmp ...
- win32 - PE Executable and section inject
#include <iostream> #include <Windows.h> #include <ShlObj.h> #include <Shlwapi. ...
- golang常用库:gorilla/mux-http路由库使用
golang常用库:gorilla/mux-http路由库使用 golang常用库:配置文件解析库/管理工具-viper使用 golang常用库:操作数据库的orm框架-gorm基本使用 一:gola ...
- 记一个 Duplicate class kotlin-stblib vs kotlin-stdlib-jdk7/8 编译问题引发的案例
某天将项目 kotlin 版本升级到了 1.8.0 ,然后编译报错了, Duplicate class kotlin-stblib vs kotlin-stdlib-jdk7/8 然后开始寻求解决方案 ...