vue 3 开发环境搭建

1. 第一步安装node.js，它会打包安装npm

去node.js官网（Download | Node.js）下载后直接安装即可无任何配置，安装完成后，新打开一个终端窗口(Windows cmd窗口，或者Unix/Linux/Mac的Terminal窗口)，输入以下命令

node -v
npm -v

输出如下所示：

mypc ~ % node -v
v16.16.0
mypc ~ % npm -v
8.11.0
mypc ~ %

2. 安装vue.js

执行如下指令来安装最新版本的vue

npm install vue@next
npm install -D @vue/compiler-sfc

mypc ~ % npm install vue@next
npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile added 10 packages, removed 4 packages, and changed 11 packages in 2s
mypc ~ % npm install -D @vue/compiler-sfcadded 8 packages, and changed 2 packages in 1s
mypc ~ %

3. 使用Vite创建一个项目

# npm 6.x
$ npm init vite@latest <project-name> --template vue# npm 7+，需要加上额外的双短横线
$ npm init vite@latest <project-name> -- --template vue$ cd <project-name>
$ npm install
$ npm run dev

4. 下载开发工具vscode (下载地址：Download Visual Studio Code - Mac, Linux, Windows)

5. 安装vue 3插件Volar

vue 3 开发环境搭建相关推荐

Vue.js学习总结（1）——Windows下Vue.js开发环境搭建
Vue.js是一套构建用户界面的 "渐进式框架".与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已 ...
vue框架开发环境搭建
说明该文章用最简单粗暴的方式完成vue框架的搭建,跟着步骤一步一步来就ok,这里就不阐述什么原理了,直接开工. 第一步:下载并安装Node.js 安装包请移步Node中文官网,直接点我进去找就行打 ...
Vue.js开发环境搭建的介绍
包含了最基础的Vue.js的框架,包含了打包工具和测试工具,开发调试的最基本的服务器,不需要关注细节,只需关注Vuejs对项目的实现 npm在国内的网络使用较慢,所以推荐下载安装淘宝的镜像 1: 2: ...
vue.js开发环境搭建
环境准备 Node.js Javascript的运行时环境 npm Node.js下的包管理工具 webpack 前端资源模块化管理和打包工具 vue-cli 脚手架构建工具 cnpm npm的淘宝镜 ...
用 cooking 搭建一个简单又优雅的 Vue 项目开发环境 (入门篇)
本文适合 Vue 的初学者,以及对 webpack 不熟悉的同学阅读.前提是你要会用基本的命令行. Node 和 NPM,以及掌握 ES2015 的基础知识.本文都是在 macOS 环境下运行,要求使 ...
[vue-cli]不用vue-cli，你自己有搭建过vue的开发环境吗？流程是什么？
[vue-cli]不用vue-cli,你自己有搭建过vue的开发环境吗?流程是什么? 基本概念首先先了解先webpack的基本概念,webpack属于一个构建工具,主要有mode.entry.out ...
Django+Vue开发生鲜电商平台之2.开发环境搭建
文章目录一.PyCharm的安装和简单使用二.MySQL和Navicat的安装和使用三.Python的安装四.虚拟环境的安装和配置五.Vue开发环境搭建一.PyCharm的安装和简单使用 ...
Vue 开发环境搭建（Mac 版）
Vue 开发环境搭建(Mac 版) 参考: https://www.jianshu.com/p/cc722eba1f46 https://www.runoob.com/w3cnote/vue2-sta ...
VUE前段开发-开发环境搭建和开发工具安装
一 VUE介绍 (1)VUE,也就是vue.js,官方的介绍是是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上 ...
从零开始搭建webpack的vue生产/开发环境
一.初始化项目在命令行中敲入如下命令: mkdir Webpack-Vue && cd Webpack-Vue && npm init -y 然后你就可以在你的当前路 ...

vue 3 开发环境搭建

vue 3 开发环境搭建相关推荐

最新文章

热门文章