快速搭建Vue项目

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/

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

PostgreSQL Patroni_exporter 监控 patroni高可用工具

Patroni是Cybertec公司基于python语言开发的,可用于使用流复制来创建,管理,维护和监视高可用性PostgreSQL集群设置的工具。 目前,PatroniEtcd 是最为推荐的PostgreSQL数据库高可用方案之一。 PostgreSQL有postgres_exporter监控采…

华为OD机试真题 JavaScript 实现【小朋友排队】【2023 B卷 100分】,附详细解题思路

目录 一、题目描述二、输入描述三、输出描述四、解题思路五、JavaScript算法源码六、效果展示1、输入2、输出 华为OD机试 2023B卷题库疯狂收录中,刷题点这里 刷的越多,抽中的概率越大,每一题都有详细的答题思路、详细的代码注释、样例测试&am…

uC-OS2 V2.93 STM32L476 移植:环境搭建篇

前言 uC-OS2 是比较经典的 RTOS,如今软件授权已经改为 Apache License Version 2.0,意味着可以免费商用了 当前 uC-OS2 的最新版本是: V2.93,打算研究一下 RTOS 的设计思想,所以想在已有的开发板:NUCLEO-L…

WAVE SUMMIT 定档8月16日,或将曝百度飞桨、文心大模型最新进展

🤵‍♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞&#x1f4…

【LeetCode 75】第十七题(1493)删掉一个元素以后全为1的最长子数组

目录 题目: 示例: 分析: 代码运行结果: 题目: 示例: 分析: 给一个数组,求删除一个元素以后能得到的连续的最长的全是1的子数组。 我们可以先单独统计出连续为1的子数组分别长度…

Vue3--->组合式API与Pinia

目录 使用create-vue搭建 1、使用create-vue创建项目 2、项目目录和关键文件 组合式API 1、组合式API - setup选项 2、组合式API - reactive和ref函数 3、组合式API - computed 4、组合式API - watch 1、基础使用 - 侦听单个数据 2、基础使用 - 侦听多个数据 3、immediate&…

【单片机】温控系统参数辨识及单片机PID控制

温控系统参数辨识及单片机PID控制 1. 温控系统组成2. matlab辨识系统参数2.1 采集阶跃响应信号导入matlab系统辨识模块 PID控制 1. 温控系统组成 半导体制冷片正向通电制冷,反向通电制热。系统采用半导体制冷片(帕尔贴)作为执行单元&#xf…

WilliamNing - 电脑办公环境 - 以及个人工作/开发习惯 - Windows/Mac

主要是记录个人的办公环境习惯,方便到新的环境,快速搭建自己熟悉的环境,从而提高工作效率 1. Windows 深圳客友 腾讯外包 家里电脑 TBD 2. Mac SeekAsia[深圳就业网络] Kumu[成都脑海科技] 2.1 桌面软件列表 后调整 -- 加了一些软件 同时…

组件化、跨平台…未来前端框架将如何演进?

前端框架在过去几年间取得了显著的进步和演进。前端框架也将继续不断地演化,以满足日益复杂的业务需求和用户体验要求。从全球web发展角度看,框架竞争已经从第一阶段的前端框架之争(比如Vue、React、Angular等),过渡到…

BUG分析以及BUG定位

一般来说bug大多数存在于3个模块: 1、前台界面,包括界面的显示,兼容性,数据提交的判断,页面的跳转等等,这些bug基本都是一眼可见的,不太需要定位,当然也不排除一些特殊情况&#xf…

随笔03 考研笔记整理

图源:文心一言 上半年的考研类博文整理,因为真的花费了很多时间才写好,所以设置为仅关注我的伙伴可以查看~🥝🥝 第1版:整理博文~🧩🧩 第2版:博文链接提前,方…

Vector - CAPL - 诊断模块函数(设置和获取)

目录 CanTpGetRxIdentifier CanTpGetTxIdentifier CanTpSetRxIdentifier CanTpSetTxIdentifier 代码示例 CanTpGetPadding & CanTpSetPadding 代码示例 CanTpGetAcceptOtherMode & CanTpSetAcceptOtherMode 代码示例 对于使用OSEK.dll文件调用发送诊断数据和接…

【element-plus】 table表格每行圆角解决方案 element也通用

系列文章目录 【Vue3ViteTselement-plus】使用tsx实现左侧栏菜单无限层级封装 前言 我们在使用element-plus或element 的table时是否有时UI给到的UI效果是如下面这样的,但是我们翻遍了组件库的文档 调整了很多次样式 发现在 左右侧栏固定的时候 普通的方法是完全…

基于小程序+spring boot流浪动物救助系统-计算机毕设 附源码12783

小程序spring boot流浪动物救助系统 摘 要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,流浪动物救助系统被用…

音视频技术开发周刊 | 304

每周一期,纵览音视频技术领域的干货。 新闻投稿:contributelivevideostack.com。 更强的Llama 2开源,可直接商用:一夜之间,大模型格局变了 Meta 终于发布了大家期待已久的免费可商用版本 Llama 2。 6000份问卷透露出AI…

Diffusion扩散模型学习3——Stable Diffusion结构解析-以图像生成图像(图生图,img2img)为例

Diffusion扩散模型学习3——Stable Diffusion结构解析-以图像生成图像(图生图,img2img)为例 学习前言源码下载地址网络构建一、什么是Stable Diffusion(SD)二、Stable Diffusion的组成三、img2img生成流程1、输入图片编…

如何获取微信公众号关注主页地址

1,首先。在公众号后台发布一篇文章,(文章也可以关注公众号) 2,浏览器打开文章地址 。在页面找到_biz码 3,https://mp.weixin.qq.com/mp/profile_ext?actionhome&__bizxxxxx&scene110#wechat_redi…

减轻 PWM 的滤波要求

经典脉宽调制器 (PWM) 发出 H 个连续逻辑高电平(1),后跟 L 个连续逻辑低电平(0)的重复序列。每个高电平和低电平持续一个时钟周期 T 1/F (Hz)。结果的占空比可定义为 H/N,其中 N HL 时钟周期。N 通常是 2…

谷粒商城第六天-商品服务之分类管理下的获取三级分类树形列表

目录 一、总述 1.1 前端思路 1.2 后端思路 二、前端部分 2.1 在网页中建好目录及菜单 2.1.1 建好商品目录 2.1.2 建好分类管理菜单 ​编辑 2.2 编写组件 2.2.1 先完成组件文件的创建 2.2.2 编写组件 2.2.2.1 显示三级分类树形列表 三、后端部分 3.1 编写商品分类…

matlab编程实践16、17

捕食者与猎物模型 人口增长 在人口增长或衰减的最简单模型中,增长速度或衰减速度与人口本身的数目成正比。增加或减少人口规模会导致出生和死亡数量成比例地增加或减少。在数学上,可以由以下微分方程描述。 可以得出:,其中。 该简…