Vue 新版 脚手架 初始化 笔记

Vue2/Vue3

修改 node 更新源

  • 将默认的 更新源修改为 淘宝的 下载地址
PS C:\Users\Administrator> npm config set registry https://registry.npm.taobao.org
PS C:\Users\Administrator>npm config get registry
https://registry.npm.taobao.org/
安装
npm install -g @vue/cli 
  • 一般 新版 Vue 脚手架不可以共存 所以如果有 旧版的脚手架 会提示你 需要卸载 原来的脚手架
  • 然后重新执行上面的安装
npm uninstall -g vue-cli
  • 安装好之后 就可以去初始化项目了
  • 值得一提的是我在官方的文档中找到了一个 在使用新版脚手架时仍然可以 创建旧版的 项目 创建的命令不变 但是 需要执行一下 以下 命令
npm install -g @vue/cli-init
  • 这是一个桥接工具
创建项目
  • 在安装好脚手架之后 就可以去初始化 新版的 项目了
vue create 'project_name' # project_name 用对应的项目名字替换
  • 和 旧版本的命令一样 按下回车键之后 就会创建一个 和项目名称一样的文件夹
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint) # vue 3 Default ([Vue 2] babel, eslint) # vue 2 这两个默认是没有 Vue-Router 等一系列常用的 moudel 的 所以一般选择第三个Manually select features #  手动选择 自定义 选择 需要的插件
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Babel( ) TypeScript( ) Progressive Web App (PWA) Support( ) Router( ) Vuex( ) CSS Pre-processors(*) Linter / Formatter( ) Unit Testing( ) E2E Testing
* Choose Vue version : vue的版本
* Babel:是否需要babel
* Typescript:是否需要ts
* Progressive Web App (PWA) Support:渐进式Web应用(PWA)支持
* Router: vue路由
* Vuex:vue状态管理器
* CSS Pre-processors:CSS预处理器(比如less、sass)
* Linter / Formatter:代码风格检查和格式化
* Unit Testing:单元测试
* E2E Testing:E2E测试
  • 就是我这个有点奇怪 别人都有 手动 选择 vue 的版本 的这个选项 而我没有 有可能是 我选的太晚了 被迭代掉了这个 选项
  • 选择完成之后就是这个样子
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)(*) Babel(*) TypeScript( ) Progressive Web App (PWA) Support(*) Router(*) Vuex(*) CSS Pre-processors
>( ) Linter / Formatter( ) Unit Testing( ) E2E Testing
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)    
> 3.x2.x
  • 然后它又提示我选择 Vue 版本 这里选择 Vue 3.x
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? (y/N) N # 是否使用 es6 的语法 来创建 Vue 的组件 果断选择 N
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) 
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes # 是否使用历史记录模式
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):  # 选择 一下 CSS 预处理器Sass/SCSS (with dart-sass)
> Less # 简单点选择 Less Stylus
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) # 这些配置 是分开写在每个配置文件中 还是 统一写在 package.json 中
> In dedicated config filesIn package.json
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) # 是否保存我们当前的选择 这里选择 No 这里英文的意思 是否 保存当前的配置 在未来的项目中使用 
  • 配置完成之后就会去自动的 创建整个项目
Vue CLI v5.0.8
✨  Creating project in E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin.
⚙️  Installing CLI plugins. This might take a while...added 852 packages in 2m
🚀  Invoking generators...
📦  Installing additional dependencies...added 34 packages in 17s
⚓  Running completion hooks...📄  Generating README.md...🎉  Successfully created project vue_systemfacesignin.
👉  Get started with the following commands:$ cd vue_systemfacesignin$ npm run servePS E:\java\idea_java_maven\SystemFacesignin> 
  • 安装完成之后 进入的项目目录下 启动项目即可
PS E:\java\idea_java_maven\SystemFacesignin> cd vue_systemfacesignin # 进入到项目的根目录中
PS E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin> npm install # 安装一下 项目依赖
up to date in 14s
PS E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin> 
PS E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin> npm run serve> vue_systemfacesignin@0.1.0 serve
> vue-cli-service serveINFO  Starting development server...DONE  Compiled successfully in 10626ms                                                                                                                      23:23:36App running at:- Local:   http://localhost:8080/- Network: http://192.168.1.4:8080/Note that the development build is not optimized.To create a production build, run npm run build.No issues found.

安装需要的组件 比如 element-plus

安装 element-plus

PS E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin> vue add element-plusWARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes📦  Installing vue-cli-plugin-element-plus...added 1 package in 16s
✔  Successfully installed plugin: vue-cli-plugin-element-plus? How do you want to import Element Plus? Fully import
? Do you want to overwrite the SCSS variables of Element Plus? Yes
? Choose the locale you want to load, the default locale is English (en) zh-cn🚀  Invoking generator for vue-cli-plugin-element-plus...
📦  Installing additional dependencies...added 14 packages in 38s
⚓  Running completion hooks...✔  Successfully invoked generator for plugin: vue-cli-plugin-element-plus
PS E:\java\idea_java_maven\SystemFacesignin\vue_systemfacesignin> 

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

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

相关文章

Mybatis Day02

增删改查 环境准备 创建一个emp表创建一个新的springboot工程&#xff0c;选择mysql、lombok、mybatis依赖application.properties中引入数据库连接信息创建对应的实体类Emp准备Mapper接口EmpMapper&#xff0c;mapper代表程序运行时自动创建接口的代理对象&#xff0c;并放入…

算法学习(三)双指针

双指针 1. 概念 4.1 数组里的双指针 用暴力解法一定可解&#xff0c;双重循环得出结果。使用双指针的方法&#xff0c;可以借助一个额外变量&#xff0c;实现降维优化。 &#xff08;1&#xff09;相反方向运动 两个指针在数组的头和尾&#xff0c;都往中间移动&#xff0c…

EasyCaptcha,开源图形验证码新标杆!

引言&#xff1a; 随着互联网的普及&#xff0c;验证码已成为网站和应用程序中不可或缺的安全组件。它能够有效地防止自动化攻击、垃圾邮件和机器人活动。在众多验证码解决方案中&#xff0c;Easy-captcha以其简单易用和高度可定制的特点受到了开发者的青睐。本文将指导读者如…

v-model原理

v-model原理 v-model原理表单类组件封装v-model简化代码 v-model原理 1.原理&#xff1a; v-model本质上是一个语法糖。例如应用在输入框上&#xff0c;就是value属性 和 input 事件的合写 <template><div id"app" ><input v-model"msg"…

Linux 基础概念

Linux 基础概念 ‍ 在最初学习Linux之前&#xff0c;首先需要搞清楚一些概念。熟悉这些概念之后紧接着熟悉各种命令&#xff0c;这有助于Linux命令的学习。这些概念绝对是你必须知道的&#xff0c;而且有些概念并不显而易见。但是当理解它们以后&#xff0c;你的shell命令也将…

Java 学习和实践笔记(8)

视频解释说&#xff0c;上图不用我们常规的写法&#xff0c;仅仅只是为了在同样的情况下&#xff0c;少写一个a而已&#xff01;这我目前不能理解。毕竟后面这种对初学者来说&#xff0c;看起来更一目了解。

DS Wannabe之5-AM Project: DS 30day int prep day14

Q1. What is Alexnet? Q2. What is VGGNet? Q3. What is VGG16? Q4. What is ResNet? At the ILSVRC 2015, so-called Residual Neural Network (ResNet) by the Kaiming He et al introduced the anovel architecture with “skip connections” and features heavy b…

爬爬爬——今天是浏览器窗口切换和给所选人打钩(自动化)

学习爬虫路还很长&#xff0c;第一阶段花了好多天了&#xff0c;还在底层&#xff0c;虽然不是我专业要学习的语言&#xff0c;和必备的知识&#xff0c;但是我感觉还挺有意思的。加油&#xff0c;这两天把建模和ai也不学了&#xff0c;唉过年了懒了&#xff01; 加油坚持就是…

【INTEL(ALTERA)】为什么 Nios V/m EMIF 数据移动器设计示例的 JTAG 终端中的内存测试失败?

说明 由于英特尔 Quartus Prime 专业版软件 22.3 版存在一个问题&#xff0c;当为Intel Agilex 7 - Nios V/m EMIF 数据移动器设计示例&#xff08;预安装设计&#xff0c;随英特尔 Quartus Prime 专业版软件一起提供&#xff09;的内存位置时&#xff0c;您可能会在 JTAG 终端…

LeetCode、1318. 或运算的最小翻转次数【中等,位运算】

文章目录 前言LeetCode、1318. 或运算的最小翻转次数【中等&#xff0c;位运算】题目链接与分类题解位运算 资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝2W&#xff0c;csdn博客专家、Java领域优质创作者&#xff0c;博客之星、阿里云平台优质作者、专注于Java后端技术领…

Linux:信号的处理

文章目录 信号处理 本篇总结的是关于信号的处理 信号处理 在之前有这样的观点&#xff1a;信号在合适的时候被处理好&#xff0c;当进程收到信号后&#xff0c;当前进程可能在做优先级更高的事&#xff0c;所以它来不及处理这个信号&#xff0c;那么就会把这个信号暂时保存起…

从零开始:Linux下的Miniconda安装教程

&#x1f680;从零开始&#xff1a;Linux下的Miniconda安装教程&#x1f680; &#x1f335;文章目录&#x1f335; &#x1f333;引言&#x1f333;&#x1f333;二、Miniconda简介&#xff1a;开启您的数据科学之旅的得力助手&#xff01; &#x1f333;&#x1f333;三、Lin…

Linux_文件系统

假定外部存储设备为磁盘&#xff0c;文件如果没有被使用&#xff0c;那么它静静躺在磁盘上&#xff0c;如果它被使用&#xff0c;则文件将被加载进内存中。故此&#xff0c;可以将文件分为内存文件和磁盘文件。 内存文件 磁盘文件 软、硬链接 一.内存文件 1.1 c语言的文件接口 …

实验5-1 使用函数计算两个复数之积

若两个复数分别为&#xff1a;c1​x1​y1​i和c2​x2​y2​i&#xff0c;则它们的乘积为 c1​c2​(x1​x2​−y1​y2​)(x1​y2​x2​y1​)i。 本题要求实现一个函数计算两个复数之积。 函数接口定义&#xff1a; double result_real, result_imag; void complex_prod( doub…

OpenMVG(EXIF、畸变、仿射特征、特征匹配)

本人之前也研究过OpenMVS但是对于OpenMVG只是原理层次的了解&#xff0c;因此乘着过年期间对这个库进行详细的学习。 目录 1 OpenMVG编译与简单测试 1.1 sfm_data.json获取 1.2 计算特征 2 OpenMVG整个流程的运行测试 3 OpenMVG实战 3.1 SVG绘制 3.2 解析图片的EXIF信息…

Decian 12.x基于LNMP安装phpIPAM(IP管理系统)

phpipam是一个开源Web IP地址管理应用程序&#xff08;IPAM&#xff09;。其目标是提供轻便&#xff0c;且有用的IP地址管理系统。它是基于PHP的应用程序&#xff0c;具有MySQL数据库后端&#xff0c;使用jQuery库&#xff0c;ajax和HTML5 / CSS3功能。 在Debian 12中&…

小马识途营销顾问分析营销故事五则

有两个做市场的小伙伴争论起来了&#xff0c;甲认为只有产品好才能在市场上胜出&#xff0c;乙认为只有营销搞好就能在市场上胜出。这两个观点小马识途营销顾问认为都有道理&#xff0c;但好的营销可以让好的产品尽快占领市场&#xff0c;好的产品可以让营销效果事半功倍。其实…

MogaNet实战:使用 MogaNet实现图像分类任务(二)

文章目录 训练部分导入项目使用的库设置随机因子设置全局参数图像预处理与增强读取数据设置Loss设置模型设置优化器和学习率调整策略设置混合精度&#xff0c;DP多卡&#xff0c;EMA定义训练和验证函数训练函数验证函数调用训练和验证方法 运行以及结果查看测试完整的代码 在上…

Python weather app tutorial

import datetime as dt import requests """ 处理HTTP请求是在Web开发和许多网络应用中常见的任务 尤其是当需要与外部服务或API进行交互时。 python通过多个库提供了处理HTTP请求的功能 最著名且友好的是‘requests’库&#xff0c;以下是‘requests’库处理HT…

小游戏和GUI编程(7) | SimpleNN 界面源码解析

小游戏和GUI编程(7) | SimpleNN 界面源码解析 0. 简介 SimpleNN 是 AdamYuan 在高中一年级时用 1 天时间写出来的简易 CNN, 使用 SFML 做 UI, 用于交互式输入手写数字&#xff0c;这个数字被训练好的 CNN 网络执行推理得到识别结果, 它的运行效果如下&#xff1a; 这一篇我们…