从零开始搭建Vue3.0项目

news/2024/11/29 7:40:30/

从零开始搭建Vue3.0项目

  • 所使用的软件及工具,环境
    • 1.确保本机已安装nodejs和npm
    • 2.Vue-cli项目搭建

所使用的软件及工具,环境

软件vscode: vscode地址下载,
svn集中式管理: 是一个开源的代码版本控制系统,用于多人共同开发同一个项目,达到资源共用目的工具。svn,
环境搭建:安装node环境

1.确保本机已安装nodejs和npm

  1. Node.js 官方网站下载: 下载安装包;

  2. 选择操作系统对应的包,按步骤傻瓜式安装好即可在这里插入图片描述

  3. win+R 输入cmd 回车 输入node -v 回车,出现版本号就代表安装成功
    在这里插入图片描述

  4. 安装镜像 (注意:两者都只是包管理器,可随便选择)

    NPM(Node Package Manager,节点包管理器)是NodeJS的包管理器,用于节点插件的管理(包括安装,卸载和管理依赖等)。NPM是随同新版的NodeJS一起安装的包管理工具,所以安装Node后可以直接使用npm完成接下来操作。

    NMP安装插件是从NPM官网下载对应的插件包,该网站的服务器在国外,经常会出现下载缓慢或出现异常,这时便需要找到另外的方法提供稳定的下载,这个方法就是CNPM。阿里巴巴的淘宝团队把插件都同步到了在中国的服务器,提供给我们从这个服务器上稳定下载资源。

    输入:npm install -g cnpm –registry=https://registry.npm.taobao.org在这里插入图片描述输入:cnpm -v (检测是否安装成功)。 在这里插入图片描述
    cnpm的用法和npm的用法一致,只是在执行命令的时候将npm改为cnpm。之后就可以使用cnpm执行命令

2.Vue-cli项目搭建

  1. 安装全局vue-cli脚手架 :npm镜像安装完成之后,接下来安装全局vue-cli脚手架。进入cmd,输入命令: cnpm install --global vue-cli 回车。
    输入 cnpm i @vue/cli -g 会全局安装vue-cli最新版
    在这里插入图片描述

  2. **创建新项目 **:脚手架搭建完成之后,接下来创建一个新项目。 打开cmd通过 cd 文件夹,到你想存项目的文件夹中输入命令 vue create project01,(project01为项目名称)那么项目在创建后会直接在新建的文件夹中。
    在这里插入图片描述
    细节操作如下:
    Defaule 是自定义配置后保存好的模板;
    default 是使用默认配置安装
    Manually select features 是自定义配置安装
    在这里插入图片描述
    选择Manually select features后,默认会帮你选择三个可以手动选择和取消配置(通过空格选择/取消)
    在这里插入图片描述
    在这里插入图片描述
    选择完后直接enter,然后会提示你选择对应功能的具体工具包,选择自己擅长或者使用广泛的,简介如下:
    1. 选择Vue.JS的版本,这里选择3.x版本
    在这里插入图片描述
    2.是否使用Class风格装饰器?这里选择yes
    在这里插入图片描述
    3.是否使用Babel与TypeScript一起用于自动检测的填充?这里选择yes
    在这里插入图片描述4. 路由模式是否需要?这里选择yes
    在这里插入图片描述
    5.选择CSS 预处理器?这里看个人需求,我选择Sass/SCSS (with dart-sass)
    在这里插入图片描述
    在这里插入图片描述
    6.代码格式化检测,如果用typescript可以选择TSLint,其他看自己需求?这里选择ESLint + Prettier正常模式
    在这里插入图片描述
    在这里插入图片描述
    7.选择语法检查方式?这里选择选择语法检查方式,这里我选择Lint on save保存就检测
    在这里插入图片描述
    在这里插入图片描述
    8.选择单元测试?这里选择Mocha + Chai
    在这里插入图片描述
    9.e2e测试:?这里选择Cypress (Chrome only)
    在这里插入图片描述
    10.把babel,postcss,eslint这些配置文件放哪?这里选择In dedicated config files放独立文件夹
    在这里插入图片描述
    在这里插入图片描述
    11.是否保存此次配置?我选择no。键入N不记录,如果键入Y需要输入保存名字,如第一步所看到的自定义配置后保存好的模板
    在这里插入图片描述
    等待下载依赖模块
    装好后通过cd进入项目的根目录,根据提示启动即可
    vue2.0 默认启动文件: npm run dev
    Vue3.0+ 默认启动文件: npm run serve


http://www.ppmy.cn/news/3998.html

相关文章

【力扣】423.从英文中重建数字

423. 从英文中重建数字 | 2022-12-15 我想先统计每个字母出现次数,然后遍历需重建的单词,单词需要什么字母作为原材料,就直接取什么。于是下面代码的复杂性基于这样一个问题: 如果我们打算先重建单词one,建到建不出来…

SpringBoot+Vue实现前后端分离的小而学在线考试系统

文末获取源码 开发语言:Java 使用框架:spring boot 前端技术:JavaScript、Vue.js 、css3 开发工具:IDEA/MyEclipse/Eclipse、Visual Studio Code 数据库:MySQL 5.7/8.0 数据库管理工具:phpstudy/Navicat JD…

MicroPython-On-ESP8266——8x8LED点阵模块(5)自制贪吃蛇游戏

MicroPython-On-ESP8266——8x8LED点阵模块(5)自制贪吃蛇游戏 1. 背景知识 连续折腾了一段时间的8x8点阵屏模块,从基本原理到驱动它显示滚动图案效果,常用的功能都使用到了。系列如下: MicroPython-On-ESP8266——8…

大数据课设

----------------------------------------------------------------------------------------------------------------------------- 由于本人主修嵌入式方向最多使用的就是C语言,由于物联网这个专业的特殊性,javaweb没少 写,所以java也用…

Spring Boot 3.x微服务升级经历

前言 Spring Boot 3.0.0 GA版已经发布,好多人也开始尝试升级,有人测试升级后,启动速度确实快了不少,如下为网络截图,于是我也按捺不住的想尝试下。 历程 首先就是要把Spring Boot、Spring Cloud 相关的依赖升一下 …

复方一枝蒿复合磷脂/IgG二性霉素B/阿糖胞苷修饰载甲氨喋呤/酶促合成半乳糖配体脂质体制备

小编今天为大家分享的科研知识是复方一枝蒿复合磷脂/IgG二性霉素B/阿糖胞苷修饰载甲氨喋呤/酶促合成半乳糖配体脂质体,一起来看! 点击输入图片描述(最多30字) 复方一枝蒿复合磷脂脂质体: 采用硫酸铵梯度法制备复方一枝…

b站黑马的Vue快速入门案例代码——【axios+Vue】天知道(天气信息查询功能)

目录 目标效果: 更换的新接口接口文档: 天知道新的Get请求接口:http://ajax-api.itheima.net/api/weather html文件中注意因为接口更换,要修改原代码为如下红字部分: 重点原理: (1)v-on可以…

邂逅Vue3和Vue3开发体验

文章目录01-邂逅Vue3和Vue3开发体验Vue3带来的变化如何使用Vue方式一&#xff1a;CDN引入方式二——下载和引入计数器案例原生实现Vue实现MVVMtemplate写法一写法二datamethod其他属性01-邂逅Vue3和Vue3开发体验 Vue3带来的变化 如何使用Vue 方式一&#xff1a;CDN引入 <d…