快速搭建Vue项目

news2024/9/9 5:25:29

1.安装node环境

下载地址为:https://nodejs.org/en/
注意node版本问题,有很多情况下是node版本问题导致的错误。

2.安装淘宝镜像cnpm

为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/

npm install cnpm -g --registry=https://registry.npm.taobao.org

如果遇到:

 cnpm : 无法加载文件 因为在此系统上禁止运行脚本。有关详细信息,请参阅 ......

可能原因:现用执行策略是 Restricted(默认设置)
解决办法:

1.win+X键,使用管理员身份运行power shell

2.输入命令:set-executionpolicy remotesigned

3.安装 vue-cli 脚手架

使用npm命令和cnpm命令都是可以的,但是使用npm安装的比较慢,而且很可能会因为网络问题而出错,所以还是使用cnpm好一点。

cnpm install -g vue-cli 

4.创建一个基于 webpack 模板的新项目

创建项目后,还需输入项目名称、项目描述、作者、打包方式、是否使用ESLint规范代码等。

vue init webpack 项目名

在这里插入图片描述

Vue build => 打包方式,回车;

Install vue-router => 是否要安装 vue-router,Y 回车;

Use ESLint to lint your code => 是否需要 js 语法检测 ,Y 回车;

Set up unit tests => 是否安装单元测试工具, N 回车;

Setup e2e tests with Nightwatch => 是否需要端到端测试工具, N 回车;

5.启动项目搭建完成

安装依赖:

cnpm i

启动项目:

npm run dev

6.目录结构

├── build/                      # webpack 编译任务配置文件: 开发环境与生产环境
│   └── ...
├── config/                     
│   ├── index.js                # 项目核心配置
│   └── ...
├ ── node_module/               #项目中安装的依赖模块
   ── src/
│   ├── main.js                 # 程序入口文件
│   ├── App.vue                 # 程序入口vue组件
│   ├── components/             # 组件
│   │   └── ...
│   └── assets/                 # 资源文件夹,一般放一些静态资源文件
│       └── ...
├── static/                     # 纯静态资源 (直接拷贝到dist/static/里面)
├── test/
│   └── unit/                   # 单元测试
│   │   ├── specs/              # 测试规范
│   │   ├── index.js            # 测试入口文件
│   │   └── karma.conf.js       # 测试运行配置文件
│   └── e2e/                    # 端到端测试
│   │   ├── specs/              # 测试规范
│   │   ├── custom-assertions/  # 端到端测试自定义断言
│   │   ├── runner.js           # 运行测试的脚本
│   │   └── nightwatch.conf.js  # 运行测试的配置文件
├── .babelrc                    # babel 配置文件
├── .editorconfig               # 编辑配置文件
├── .gitignore                  # 用来过滤一些版本控制的文件,比如node_modules文件夹 
├── index.html                  # index.html 入口模板文件
└── package.json                # 项目文件,记载着一些命令和依赖还有简要的项目描述信息 
└── README.md                   #介绍自己这个项目的,可参照github上star多的项目。
build/

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

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

相关文章

【Redis】内存数据库Redis进阶(搭建各种集群)

目录 单机安装Redis搭建Redis主从集群搭建Redis哨兵集群 基于 CentOS 7 的 Redis 集群 单机安装Redis 安装 Redis 所需要的依赖: yum install -y gcc tcl将 Redis 安装包(redis-6.2.4.tar.gz)上传到任意目录 解压缩: tar -xzf …

如何过一个高质量的周末?

如何过一个高质量的周末? 😇博主简介:我是一名正在攻读研究生学位的人工智能专业学生,我可以为计算机、人工智能相关本科生和研究生提供排忧解惑的服务。如果您有任何问题或困惑,欢迎随时来交流哦!&#x1…

分布式系统常见理论讲解

分布式系统是指由多个节点通过网络进行通信和协作的系统,它具有高可用性、高扩展性、高性能等优点,但也面临着一些挑战,如数据一致性、容错性、负载均衡等。为了解决这些问题,分布式系统设计出现了一些经典的理论和方法&#xff0…

阻塞队列BlockingQueue详解

一、阻塞队列介绍 1、队列 队列入队从队首开始添加,直至队尾;出队从队首出队,直至队尾,所以入队和出队的顺序是一样的 Queue接口 add(E) :在指定队列容量条件下添加元素,若成功返回true,若当前…

【C++奇遇记】初探名称空间

🎬 博客主页:博主链接 🎥 本文由 M malloc 原创,首发于 CSDN🙉 🎄 学习专栏推荐:LeetCode刷题集 数据库专栏 初阶数据结构 🏅 欢迎点赞 👍 收藏 ⭐留言 📝 如…

Ubuntu篇——Ubuntu20.04备份成ISO镜像文件并安装到其他电脑上(完整步骤)

注意,此方法制作的镜像,仅限于相同硬件配置的电脑安装,否则可能会发生某些驱动不兼容导致无法安装的情况。(例如英伟达显卡的笔记本电脑,很大概率无法安装你在其他显卡电脑上制作的镜像。) 一、安装systemb…

设计模式行为型——命令模式

目录 什么是命令模式 命令模式的实现 命令模式角色 命令模式类图 命令模式举例 命令模式代码实现 命令模式的特点 优点 缺点 使用场景 注意事项 什么是命令模式 命令模式(Command Pattern)是一种数据驱动的设计模式,它属…

一篇关于CPU的硬核知识

不管你玩硬件还是做软件,你的世界都少不了计算机最核心的 —— CPU。 01CPU是什么? CPU与计算机的关系就相当于大脑和人的关系,它是一种小型的计算机芯片,通常嵌入在电脑的主板上。CPU的构建是通过在单个计算机芯片上放置数十亿…

iOS开发-UIScrollView嵌套tableView实现顶部tab横向切换

iOS开发-UIScrollView嵌套tableView实现顶部tab横向切换 通过ScollView嵌套两个TableView左右切换功能 一、UIScollView UIScrollView可滚动控件,这里初始化需要设置_backScollView.pagingEnabled YES; 代码如下 _backScollView [[UIScrollView alloc] initWi…

ARP协议请求

文章目录 作用请求与应答流程数据包ARP协议以太网帧协议具体应用 作用 通过 IP地址 查找 MAC地址。 请求与应答流程 A:数据发送主机 B:目标主机 目前只知道目标主机IP地址,想把数据发送过去,需要查询到目标主机的MAC地址&#x…

构建基于大模型的Autonomous Agents案例(一)

构建基于大模型的Autonomous Agents案例 1.1 Autonomous Agents原理机制 在本节中,我们将聚焦于LangChain上的自治代理(Autonomous Agents on LangChain)。自治代理是当前业界最热门的话题之一,特别是在企业级应用中。当然&#x…

关于综合能源智慧管理系统的架构及模式规划的研究

安科瑞 华楠 摘 要:探讨了国内外能源互联网的研究发展,分析了有关综合智慧能源管理系统的定位,以及系统的主要特点,研究了综合智慧能源管理系统的构架以及模式规划。 关键词:综合能源;智慧管理系统&#…

MySql操作进阶

目录 1.多表联查 1.1内连接 1.2左连接和右连接 1.3自连接 2.子查询 3.合并查询 1.多表联查 多表联查实际上就是对多张表中的数据合并在一起进行查询,具体合并多张表中的数据方式为:取笛卡尔积的方式进行合并。 但仅是以笛卡尔积的方式合并表较为…

网络安全进阶学习第九课——SQL注入介绍

文章目录 一、什么是注入二、什么是SQL注入三、SQL注入产生的原因四、SQL注入的危害五、SQL注入在渗透中的利用1、绕过登录验证:使用万能密码登录网站后台等。2、获取敏感数据3、文件系统操作4、注册表操作5、执行系统命令 六、如何挖掘SQL注入1、SQL注入漏洞分类按…

无涯教程-Lua - Arrays(数组)

数组是对象的有序排列,可以是包含行集合的一维数组,也可以是包含多行和多列的多维数组。 在Lua中,数组是使用带有整数的索引表实现的。数组的大小不是固定的,并且可以根据无涯教程的要求(取决于内存限制)来增长。 一维数组 一维…

WEB应用程序数据库防守篇之预防SQL漏洞注入

前言: 国内目前几乎市面上所有的web应用程序都使用关系型数据库来存储用户的数据信息,可以这么说,数据库是一个项目,一个互联网公司乃至国家最重要的数据中心。如果数据库被入侵成功,所引发的后果将是灾难性,无法想象…

JavaSE 【类和对象】(3)(重点:代码块、对象的打印)

目录 一、代码块 1.静态代码块 2.构造代码块/实例代码块 3.总结 代码块执行的顺序: 1.静态代码块 2.构造代码块(实例代码块) 3.执行对应的构造方法 其中:静态的只执行一次 二、 对象的打印 有一个快速打印的方法&#x…

scrapy框架简单实现豆瓣评分爬取案例

豆瓣网址:https://movie.douban.com/top250 1.创建scrapy框架 scrapy startproject 项目名(scrapy_test_one)创建好以后的目录是这样的 2.创建spider文件 在spiders目录下创建一个spider_one.py文件,可以随意命名,该文件主要是让我们进行数…

MaxPatrol SIEM 增加了一套检测供应链攻击的专业技术

我们为 MaxPatrol SIEM 信息安全事件监控系统增加了一套新的专业技术。 该产品可帮助企业防范与供应链攻击相关的威胁。 此类攻击正成为攻击者的首要目标:它们以软件开发商和供应商为目标,网络犯罪分子通过他们的产品进入最终目标的基础设施。 因此&a…

【数据结构】——线性表的相关习题

目录 题型一(顺序表的存储结构)题型二(链表的判空)题型三(单链表的建立)题型四(顺序表、单链表的插入删除) 题型一(顺序表的存储结构) 1、线性表的顺序存储结…