Vue2创建移动端项目

news2024/9/30 13:28:54

一、Vscode
Vscode 下载安装以及常用的插件
1、Vscode 下载
下载地址:Vscode

  • 中文语言插件
    搜索 chinese
    Chinese

  • 主题
    Atom 主题Atom

  • 文件图标主题
    搜索 icon
    icon

  • 源代码管理插件GitLens
    搜索 GitLens git

  • Live Server _本地服务器

    搜索 Live Server
    在这里插入图片描述

  • Prettier - Code formatter _格式化代码
    搜索 Prettier - Code formatter
    在这里插入图片描述

  • EsLint

    ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具

    搜索 ESLint 在这里插入图片描述

  • Vetur _Vue 开发利器
    搜索 Vetur
    vetur

  • 设置 注释、变量等颜色

按需定制注释、变量/非必须

  1. 点击左下角设置
  2. 搜索 setting.json 文件
  3. 拷贝下面代码设置即可

在这里插入图片描述

"editor.tokenColorCustomizations": {
    "comments": {
        // 设置字体样式 加粗 下划线 斜体等
        "fontStyle": "",
        // 设置字体颜色
        "foreground": "#4CAEE2"
    }, // 注释
    "keywords": "#0a0", // 关键字
    "variables": "#f00", // 变量名
    "strings": "#e2d75dbd", // 字符串
    "functions": "#5b99fcc9", // 函数名
    "numbers": "#AE81FF" // 数字
}

二、node.js
1、node.js 下载
下载地址: node.js
文档查看:https://docs.npmjs.com/
在这里插入图片描述2、安装
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
3、查看版本
win+ R 打开终端命令窗口,输入cmd
cmd
输入命令 node -v,查看版本,安装成功
在这里插入图片描述
三、Vue 环境
1、Vue 官方文档:https://cn.vuejs.org/
2、安装 vue/cli

  • npm install -g @vue/cli
    在这里插入图片描述
  • 安装完成后,输入 vue --version命令,确保安装成功
    在这里插入图片描述

3、创建 Vue 项目

  • 进入文件目录下,输入cmd,输入 项目名称
    在这里插入图片描述
  • 选中 Manually select features,自定义配置
    在这里插入图片描述
  • 各种配置
    在这里插入图片描述
  • 创建成功
    在这里插入图片描述
  • 启动项目
    进入项目文件夹 cd vue01, 启动 npm run serve
    在这里插入图片描述
  • 浏览项目页面
    在这里插入图片描述

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

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

相关文章

405 Method Not Allowed,CORS跨域,来也自动化OCR接口报错,Nginx处理OPTIONS请求

在使用来也的OCR接口时,请求报错了,提示CORS跨域。POST请求,请求url:http://mage.uibot.com.cn/v1/mage/ocr/bills,官方文档:请求与响应:预检请求OPTIONS正式请求错误信息看控制台和网络栏位内容…

【沁恒WCH CH32V307V-R1开发板输出DAC实验】

【沁恒WCH CH32V307V-R1开发板输出DAC实验】1. 前言2. 软件配置2.1 安装MounRiver Studio3. DAC项目测试3.1 打开DAC工程3.2 编译项目4. 下载验证4.1 接线4.2 演示效果5. 小结1. 前言 数字/模拟转换模块(DAC),包含 2 个可配置 8/12 位数字输入…

自己动手做一个mini-chatgpt

开场最近chatgpt已经火爆了,几乎是家喻户晓老少皆知啊,公测推出60天后就已经是UV人数过亿,日访问量号称也是过亿。投资chatgpt研发团队的微软也是2个月内迅速推出自己的chatgpt的bing搜索,股票下载量都是暴增啊。前面文章已经介绍…

计算机网络自定向下 -- 浅谈可靠性之rdt协议

可靠性数据传输原理 可靠指数据在传输过程中不错,不丢,不乱 运输层要为应用层提供一种服务:数据可以通过一条可靠的信道进行传输,在该信道中传输的数据不会受到损坏或者丢失, 实现这种服务的是可靠数据传输协议。 要实现这种服…

python的opencv操作记录11——阈值分割

文章目录传统图像处理分割阈值分割一个应用场景opencv库中的阈值分割固定阈值THRESH_OTSU 大津法阈值自适应阈值传统图像处理分割 现在提到图像分割,很多人会直接想到当前火爆的深度学习的各种分割网络,比如实例分割,语义分割等。其实在传统…

Java爬虫Selenium+Java+ChromeDriver

一、爬虫工具 selenium 是一个模拟浏览器操作的工具,背后有google 维护源代码,支持全部主流浏览器,支持主流的编程语言,包括:java,Python,C#,PHP,Ruby,等,在本项目上使用的Java语言。 官网:https://www.sel…

【Vue】参数传递:如何同时传递 DTO 和 file 文件

日常开发时,如果遇到较为复杂的 DTO 对象的参数传递时,通常前端使用的请求头为:application/json(JSON 格式的数据);而后端可以使用 RequestBody 接收一个 DTO 对象。但当需要在一个界面上同时传递 DTO 和附…

Java集合中的Map

MapMap接口键 值 对存储键不能重复&#xff0c;值可以重复Map三个实现类的存储结构HashMap&#xff1a;Hash表链表红黑树结构 线程不安全TreeMap&#xff1a; 底层红黑树实现HashTable&#xff1a;hash表链表红黑树 线程安全HashMapHashMap常用方法HashMap<String,String>…

[测开篇]设计测试用例的方法如何正确描述Bug

​ 文章目录为什么测试人员要写测试用例&#xff1f;怎样设计测试用例&#xff1f;&#xff08;总的方面&#xff09;1.基于需求设计测试用例&#xff08;总的方面&#xff09; 2.页面&#xff08;总的方面&#xff09; 3.非功能性测试&#xff08;具体方面&#xff09; 4.1 等…

「Python|环境安装|Windows」如何在Windows上安装Python环境?

本文主要介绍如何在Windows上安装Python&#xff0c;帮助初学者或者非程序员伙伴快速搭建可以运行python代码的环境。 文章目录安装python做一点小配置验证python如何安装指定版本的python编程语言的环境搭建一直是学习编程的第一道门槛。 对于如何在Linux系统上安装指定版本的…

谷歌蜘蛛池怎么搭建?Google蜘蛛池可以帮助谷歌排名吗?

本文主要分享关于谷歌蜘蛛池的搭建疑问&#xff0c;以及Google对谷歌排名的影响到底有多大。 本文由光算创作&#xff0c;有可能会被剽窃和修改&#xff0c;我们佛系对待这种行为吧。 谷歌蜘蛛池怎么搭建&#xff1f; 答案是&#xff1a;需要一个内链外链体系复杂的站群系统…

154、【动态规划】leetcode ——494. 目标和:回溯法+动态规划(C++版本)

题目描述 原题链接&#xff1a;494. 目标和 解题思路 &#xff08;1&#xff09;回溯法 本题的特点是nums中每个元素只能使用一次&#xff0c;分别试探加上nums[index]和减去nums[index]&#xff0c;然后递归的遍历下一个元素index 1。 class Solution { public:int res …

java中flatMap用法

java中map是把集合每个元素重新映射&#xff0c;元素个数不变&#xff0c;但是元素值发生了变化。而flatMap从字面上来说是压平这个映射&#xff0c;实际作用就是将每个元素进行一个一对多的拆分&#xff0c;细分成更小的单元&#xff0c;返回一个新的Stream流&#xff0c;新的…

1629_MIT_6.828_xv6_chapter1操作系统的组织

全部学习汇总&#xff1a;GreyZhang/g_unix: some basic learning about unix operating system. (github.com) 这一次整理一下操作系统组织相关的知识&#xff0c;主要还是xv6教学操作系统相关的知识。当然&#xff0c;很多知识在这类技术领域是通用的。 1. 操作系统的主要功能…

SAP ABAP Odata

GetEntity和GetEntitys GetEntitys 创建Odata Project 导入结构 选择需要的字段 设定Key 勾选字段的creatable、updatable、sortable、nullable、filterable属性值。 再依上述步骤创建ZPOITEM结构和实体集 3. 创建ZPOHEADER和ZPOITEM的Association 两个实体集的关联字段&…

RocketMQ-消息消费模式 顺序消费

RocketMQ-消息消费模式 顺序消费RocketMQ-消息消费模式集群模式集群模式的演示(本身就默认)Rocketmq存储队列广播模式顺序消费如何改实现顺序消费RocketMQ-消息消费模式 集群模式 在消费模式为集群的情况下,如果机器是集群的,消息只会给集群中的其中一台机器消费到 集群模…

【数据结构】双向链表的模拟实现(无头)

目录 前言&#xff1a; 1、认识双向链表中的结点 2、认识并创建无头双向链表 3、实现双向链表当中的一些方法 3.1、遍历输出方法&#xff08;display&#xff09; 3.2、得到链表的长度&#xff08;size&#xff09; 3.3、查找关键字key是否包含在双链表中(contains) 3.…

基于I2S通讯MAX98357模块的JetsonNano声音外放

前言有很多方法可以为 Jetson 设备添加音频功能。USB 扬声器和USB 麦克风是一种简单的解决方案&#xff0c;但它们确实占用了宝贵的 USB 插槽&#xff0c;这些插槽可能更适合用于键盘、蓝牙功能、Internet Keys 和其他配件。在 Jetson 设备上&#xff0c;NVIDIA 通过 40 针 GPI…

微软发布会精华回顾:“台式电脑”抢了风头

Lightbot北京时间2016年10月26日晚10点&#xff0c;微软在纽约发布了名为 Surface Studio 的一体机、名为 Surface Dial 的配件以及外观未变的顶配版 Surface Book。同时&#xff0c;微软宣布了 Windows 10 下一个重要版本——“Creators Update”的数项新功能&#xff0c;包括…

【Linux】冯诺依曼体系结构和操作系统概念

文章目录&#x1f3aa; 冯诺依曼体系结构&#x1f680;1.体系概述&#x1f680;2.CPU和内存的数据交换&#x1f680;3.体系结构中数据的流动&#x1f3aa; 操作系统概念理解&#x1f680;1.简述&#x1f680;2.设计目的&#x1f680;3.定位&#x1f680;4.理解&#x1f680;5.管…