vue脚手架的安装并创建项目

news2024/9/22 1:28:21

在之前的练习中我们都是采用引入jquery、vue文件的形式,很多es6的新特性都是无法使用的,因此现在我们采用脚手架进行安装相关的配置。
1、下载node.js,使用其中内置的npm来下载安装包。
直接在官网中下载长期支持版本即可。点击进入node.js官网

检验node是否安装成功:搜索cmd打开命令提示符,输入node -v ,能显示出版本号则表示安装成功。输入npm -v能显示出版本号则表示可以使用npm。
在这里插入图片描述

{ 预备知识:使用npm下载包的方法:npm install 包名,如 npm install vuenpm install jquery
不用再像以前一样引入vue文件了,新建一个“脚手架”的文件夹,在脚手架的文件夹里,在上面的路径中输入cmd就直接跳转到了脚手架文件夹所在的路径的命令提示符,输入npm install vue就会自动下载相应的包到脚手架的文件夹下。
如果没有脚手架的话我们要搭建vue环境是非常复杂的,而现在通过脚手架搭建环境是非常方便的。}

2、使用npm安装脚手架。
在“脚手架”的文件夹下的命令提示符中输入npm install -g @vue/cli.
在这里插入图片描述
-g表示全局安装,可以在任意文件夹下运行,否则只能在当前文件夹下运行.

验证脚手架是否成功安装:在“脚手架”文件夹下的cmd中输入vue/cli --version查看脚手架的版本号.
在这里插入图片描述
3、使用脚手架创建项目。
vue create 项目名字(用英文不要中文)

4、配置脚手架的相关内容:
(1)手动选择风格Manually select features:* 代表选中,上下键切换项,空格切换*选中,我们目前需要选中:Babel(es6转码成es5)、Router、CSS Pre-processors、Linter/Formatter(css预处理器)。(现在没装的之后还可以装)。
像TS(vue3用)、vuex(之后用)可以再用的时候再装,方法之后再讲。
(2)选择vue版本:2.x。
(3)User history mode for router?n
(4)Pick a CSS pre-processor预处理器:Less。(sass这几种都很常用,我们使用的是less)
(5)Pick a linter/formatter config代码审查工具:ESLint with error prevention only。(只在有错误的时候审查)
(6)Pick additional lint features什么时候进行代码风格检查:Lint on save.
(7)Where do you prefer placing config for Babel在哪个地方去存一下配置文件:in package.json.
(8)Save this as a preset for future project?N.
(9)等待安装…直到Successfully created project mypro.

-------------从下面是打开项目
Get started with the following commands:如果是紧跟着上面的步骤则使用下面的(1)进入mypro文件夹下,否则直接打开mypro文件夹里在里面的地址栏输入cmd转到mypro文件夹下。
(1)cd mypro 转到mypro目录下或直接到项目mypro的目录中cmd
(2)npm run serve 运行服务器必须是在项目mypro的文件夹里
生成地址:http://localhost:8080/
直接在浏览器中输入地址进入到项目中,不再是通过html文件打开了。
注意:不要关闭命令行,否则就会关闭服务器

或者直接将我们的mypro文件夹拖动用vscode打开,在终端中打开直接输入 npm run serve

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/931945.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

建模杂谈系列234 基于图的程序改造

说明 为了进一步提升程序设计与运维的可靠性,我觉得(目前看来)只有依赖图的结构。 提升主要包含如下方面: 1 程序结构的简洁性:节点和边2 程序执行的可视化:交通图(红、黄、绿)3 程序支持的逻辑复杂性。…

Multisim软件安装包分享(附安装教程)

目录 一、软件简介 二、软件下载 一、软件简介 Multisim软件是一款电路仿真和设计软件,由美国国家仪器公司(National Instruments)开发。它提供了一个交互式的图形界面,使用户能够轻松地构建和仿真电路。以下是Multisim软件的详…

什么是devos勒索病毒,中招之后该怎么办?勒索病毒解密,数据恢复

Devos勒索病毒是一种比较常见的勒索病毒病毒,它利用加密技术来锁定用户的文件,并要求支付赎金才能解锁。这种病毒已经引起了全球范围内的关注,也给众多的企业主和个人造成了不可估量的损失。 Devos勒索病毒的起源尚不清楚,但它的攻…

无涯教程-分类算法 - 逻辑回归

逻辑回归是一种监督学习分类算法,用于预测目标变量的概率,目标或因变量的性质是二分法,这意味着将只有两种可能的类。 简而言之,因变量本质上是二进制的,其数据编码为1(代表成功/是)或0(代表失败/否)。 在数学上&…

Linux保存退出和不保存退出命令

Vim编辑器 vim 要编辑的文件输入i进入编辑模式保存退出: 按Esc键退出insert模式,然后输入冒号(:),输入wq!可以保存并退出. 不保存退出: 按Esc键退出insert模式,然后输入冒号(:),输入q!可以不保存并退出。…

Autosar存储入门系列03_Autosar中NVM状态机及存储调用逻辑

本文框架 0.前言1. NVM状态机介绍2. NVM读/写基本逻辑2.1 NVM读操作2.2 NVM写操作2.2.1 实时写2.2.2 下电写 2.3 NVM写入注意事项 0.前言 本系列是Autosar存储入门系列,希望能从学习者的角度把存储相关的知识点梳理一遍,这个过程中如果大家觉得有讲得不…

图文并茂:Python Tkinter从入门到高级实战全解析

目录 介绍什么是Tkinter?准备工作第一个Tkinter程序界面布局事件处理补充知识点 文本输入框复选框和单选框列表框弹出对话框 综合案例:待办事项列表总结 介绍 欢迎来到本篇文章,我们将带您深入了解如何在Python中使用Tkinter库来创建图形用…

弯道超车必做好题集锦二(C语言选择题)

前言: 编程想要学的好,刷题少不了,我们不仅要多刷题,还要刷好题!为此我开启了一个弯道超车必做好题锦集的系列,每篇大约10题左右。此为第二篇选择题篇,该系列会不定期更新,后续还会…

【网络云盘客户端】——项目简介

项目简介 网络云盘客户端时基于QT/C框架实现了一个网络云盘客户端软件,主要功能包括用户的注册,登录,显示用户的个人文件列表,以及文件的上传,下载,删除,共享文件。 登录界面 主窗口界面 文件…

Postman中参数区别及使用说明

一、Params与Body 二者区别在于请求参数在http协议中位置不一样。Params 它会将参数放入url中以?区分以&拼接Body则是将请求参数放在请求体中 后端接受数据: 二、body中不同格式 2.1 multipart/form-data key - value 格式输入,主要特点是可以上…

Proteus软件安装包分享(附安装教程)

目录 一、软件简介 二、软件下载 一、软件简介 Proteus软件是一款电路设计和仿真的综合性软件,由Labcenter公司开发。它提供了一个交互式的图形界面,用户可以在其中构建电路、仿真结果并实时观察仿真结果。 1、Proteus的历史和演变 Proteus软件最初于…

Matlab图像处理-加法运算

加法运算 图像加法运算的一个应用是将一幅图像的内容叠加到另一幅图像上,生成叠加图像效果,或给图像中每个像素叠加常数改变图像的亮度。 在MATLAB图像处理工具箱中提供的函数imadd()可实现两幅图像的相加或者一幅图像和常量的相加。 程序代码 I1 i…

C++学习记录——이십유 C++11(2)

文章目录 1、类的新功能1、移动构造和移动赋值2、default、delete 2、可变参数模板3、STL容器的emplace 1、类的新功能 1、移动构造和移动赋值 逐成员按字节拷贝就是浅拷贝。一个类中,如果达成默认移动构造的要求,那么传右值就会使用移动构造了&#xf…

022-从零搭建微服务-短信服务(二)

写在最前 如果这个项目让你有所收获,记得 Star 关注哦,这对我是非常不错的鼓励与支持。 源码地址(后端):https://gitee.com/csps/mingyue 源码地址(前端):https://gitee.com/csps…

Docker镜像的私有定制之nginx

一、背景 机器上已有nginx的可执行文件,但它是基于官方源码进行修改过的,可模块的源码一时找不到。另外,每次都基于源码去构建,对于Nginx部署也是麻烦。 所以,我们想要改为docker容器化部署nginx。 操作系统是centos…

STL-常用容器-map/ multimap容器(二叉树-红黑树)

1 map基本概念 简介: Map是一种关联容器,它通过将键和值成对存储,实现了快速的键值查找。在Map中,每个键都是唯一的,而值可以重复。Map容器内部使用平衡二叉树(通常是红黑树)的数据结构来实现高…

HodlSoftware-免费在线PDF工具箱 加解密PDF 集成隐私保护功能

HodlSoftware是什么 HodlSoftware是一款免费在线PDF工具箱,集合编辑 PDF 的简单功能,可以对PDF进行加解密、优化压缩PDF、PDF 合并、PDF旋转、PDF页面移除和分割PDF等操作,而且工具集成隐私保护功能,文件只在浏览器本地完成&…

OpenCV基础知识(8)— 图形检测

前言:Hello大家好,我是小哥谈。图形检测是计算机视觉的一项重要功能。通过图形检测可以分析图像中可能存在的形状,然后对这些形状进行描绘,例如搜索并绘制图像的边缘,定位图像的位置,判断图像中有没有直线、…

【面向大一新生IT技术社群招新啦,不来瞅瞅?】

个人名片: 🐼作者简介:一名大三在校生 🐻‍❄️个人主页:落798. 🐼个人WeChat:落798. 🕊️系列专栏:【零基础学java】 ----- 【重识c语言】 ---- 【计算机网络】—【Spri…