从零开始搭建Vue3.0项目

从零开始搭建Vue3.0项目

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

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

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

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

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

  2. 选择操作系统对应的包,按步骤傻瓜式安装好即可从零开始搭建Vue3.0项目_第1张图片

  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 (检测是否安装成功)。 从零开始搭建Vue3.0项目_第2张图片
    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最新版
    从零开始搭建Vue3.0项目_第3张图片

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

你可能感兴趣的:(前端,npm,vue.js,javascript)