Vue2/3 脚手架搭建

2024-05-27 23:55:13

本章节仅限本人搭建过程及问题解决

一、确认node 安装

1、首先就是确认自己的 node和 npm 按照成功，打开命令行工具查看； node -v npm-v 查看版本号node确认安装成功

二、配置npm的淘宝镜像加快访问速度

命令行安装三、安装vue-cli脚手架构建工具

  2：安装命令npm config set registry https://registry.npm.taobao.org3：查看是否安装成功 npm info express

三、安装vue-cli脚手架构建工具

vue-cli 提供了一个官方命令行工具，可用于快速搭建大型单页面应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目

1、全局安装 vue-cli

npm install -g @vue/cli

安装完成之后使用vue --version查看版本信息

若报错，出现没有vue-cmd 查看此方法安装Vue后，没有vue.cmd文件

2、切换到创建项目的目录，运行下面命令进行创建项目

vue create xxx（项目名）

可以用方向键选取指定版本，然后回车进行下一步

3、回车完成之后，系统提示如下命令，进入到vue-test文件夹中执行npm run serve进行编译

依次执行命令

4、完成后，没有什么问题就会出现运行链接

随便选取链接打开就可以了，最后页面显示就没问题了。

四、也可以根据官方的脚手架搭建项目

Vue官网脚手架搭建

根据官方文档依次执行就可以了。默认是最新版本的vue 也就是Vue3的版本

查看vue版本命令行执行 vue -V 查看（V必须大写）

Vue2/3 脚手架搭建相关推荐

用vue-cli脚手架搭建一个仿网易云音乐的全家桶vue项目
一,vue-cli环境搭建 1,全局安装webpack npm install webpack -g 2,安装vue脚手架 npm install vue-cli -g 3,新建一个新的project ...
React学习：脚手架搭建、antd引入-学习笔记
文章目录 React学习:脚手架搭建.antd引入-学习笔记脚手架搭建项目目录结构 antd引入 antd附加:数据可放置的三个位置 React学习:脚手架搭建.antd引入-学习笔记脚手架搭建 ...
Vue学习（常用实例、脚手架搭建）-学习笔记
文章目录 Vue学习(常用实例.脚手架搭建)-学习笔记实例1 法1 法2 实例2 脚手架搭建 vue-cli2.0 vue-cli4.0 Vue学习(常用实例.脚手架搭建)-学习笔记附加:阿里巴巴 ...
Vue CLI 3 脚手架搭建
@[TOC](Vue CLI 3 脚手架搭建) 注意 see -> cli.vuejs.org/zh/guide/ Vue CLI 的包名称由 vue-cli 改成了 @vue/cli Vue ...
vue脚手架搭建项目_复习之vue脚手架搭建项目的两种方法
安装脚手架 node 版本要求: > 8.9 . 关于旧版本:如果在这之前已经全局安装了旧版本的vue-cli(1.x 或 2.x),那么需要先卸载掉. 卸载旧版本运行:``npm uninst ...
vue脚手架搭建项目的兼容性配置
使用vue-cli搭建项目,面临着解决ie兼容性问题(ie9+),因为ie浏览器并不支持es6语法等. 首先安装babel-polyfill,解决ie不支持promise对象的问题 npm insta ...
Vue 脚手架搭建目录及文件详解
vue脚手架搭建在各大前端网站都有详解,这里就不多作介绍,此文章主要介绍脚手架搭建后的目录结构,以及配置文件的详解. 1. 目录结构目录结构如下: 我们来介绍一下这些目录: 一级目录 build: ...
vue简易微前端项目搭建（二）：子项目模板及项目脚手架搭建
github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...
Vue项目脚手架搭建
Vue项目脚手架搭建 Vue 项目脚手架搭建需要的工具安装NodeJs 安装vue-cli 安装webpack 初始化项目启动项目 Vue 项目脚手架搭建需要的工具 NodeJs vue-cli ...

最新文章

热门文章