vscode搭建vue开发环境(vue入门)

最新推荐文章于 2025-04-17 16:44:58 发布
最新推荐文章于 2025-04-17 16:44:58 发布
阅读量2.3w 收藏 236
点赞数 30
分类专栏： VUE 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45633422/article/details/115019629
版权

本文基于vue2.0版本，文末说明怎么升级为vue3.0版本

一.安装VScode

	从官网下载，安装就行。以下操作在win+r  -> cmd 命令行界面执行。
	在vscode中就是在创建好的项目空白处右键open in Integrated Terminal(在内部终端中打开)执行npm install安装依赖，
	npm run dev热部署等（第六步开始可以在命令行和vscode中都可以）。

二.安装node.js

	从nodejs官网下载。安装就行。
	安装完成之后，可以在命令行中输入node -v ，如果出现相应的版本号，则说明安装成功。
	npm包管理器，是集成在node中的，所以，直接输入 npm -v就会如下图所示，显示出npm的版本信息。
其中npm的安装目录在这里C:\Users\SJH\AppData\Roaming\npm

三. 安装cnpm

    由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，
所以还需要npm的国内镜像—cnpm。
    在命令行中输入 npm install -g cnpm –registry=http://registry.npm.taobao.org 。

安装完成之后在C:\Users\SJH\AppData\Roaming\npm中会出现cnpm文件

四.安装vue-cli脚手架构建工具

    在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。

通过以上三部，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。

五.用vue-cli构建项目

    在你的workspace中进入命令行。(不建议在桌面，建议在workspace中)
在命令行中运行命令 vue init webpack firstVue 。解释一下这个命令，这个命令的意思是初始化一个项目
    其中webpack是构建工具，也就是整个项目是基于webpack的。
    其中firstVue是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中，如下图：
运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息 
列表如下
(1)? Project name (VueTest002)：项目名称name can no longer contain capital letters（不能大写）
(2)? Project description (A Vue.js project) vue-cli新建项目(项目描述)；
(3)? Author (xhdx <zhuming3834@sina.com>) ；zhuming3834@sina.com(项目作者)；
(4)? Vue build
❯ Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY 
allowed in .vue files - render functions are required elsewhere
这里选择Runtime + Compiler: recommended for most users；
(5)? Install vue-router? (Y/n) y 是否使用vue-router，这里根据需求选择；
(6)? Use ESLint to lint your code? (Y/n) y 是否使用ESLint，这里根据需求选择；
(7)? Pick an ESLint preset (Use arrow keys)
❯ Standard (https://github.com/feross/standard)
Airbnb (https://github.com/airbnb/javascript) none (configure it yourself) 
这里选择	Standard(https://github.com/feross/standard)
(8)? Setup unit tests with Karma + Mocha? (Y/n) n 是否需要单元测试，这里根据需求选择；
(9)Setup e2e tests with Nightwatch? (Y/n) n是否需要单元测试，这里根据需求选择；
(10) Should we run `npm install` for you after the project has been created? 
(recommended) (Use arrow keys)
创建项目后需要需要安装项目所需要的依赖，这里选择no，本步骤作为步骤6说明

六.安装项目所需的依赖

    安装依赖包，首先cd到项目文件夹（firstVue文件夹），然后运行命令 cnpm install ，等待安装
	安装完成之后，会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹，这里边就是我们
项目需要的依赖包资源

注：我在实际中其实是前面选择no不安装依赖，也是会有node_modules的，只是和yes安装的文件夹大小不一样

七.运行项目

    安装完依赖包之后，就可以运行整个项目了。
    在项目目录中，运行命令 npm run dev ，会用热加载的方式运行我们的应用，热加载可以让我们在修改完
代码后不用手动刷新浏览器就能实时看到修改后的效果。
    这里简单介绍下 npm run dev 命令，其中的“run”对应的是package.json文件中，scripts字段中的dev，
也就是 node build/dev-server.js命令的一个快捷方式。

项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。运行成功后，会看到如下所示的界面。

八.集成element

安装完nodejs的所有，能正常运行整个项目后，将element集成到项目中的步骤如下：

1、在cmd命令行进入到项目根目录输入cnpm i element-ui -S
2、安装完成之后，package.json文件会增加element-ui依赖

在这里插入图片描述

注：vue create、vue webpack init 创建vue项目产生的项目文件区别说明

1.使用webpack init创建项目
1.用法：vue init webpack app
2.产生目录及说明
build及config：webpack配置相关
src：项目源码
static：存放静态资源
.babelrc：babel相关配置（因为我们的代码大多都是    ES6，而大多浏览器是不支持ES6的，所以我们需要babel帮我们转换成ES5语法）
.editorconfig：编辑器的配置，可以在这里修改编码、缩进等
.eslintignore：设置忽略语法检查的目录文件
.eslintrc.js：eslint的配置文件
.gitignore：git忽略里面设定的这些文件的提交
index.html：入口html文件
package.json：项目的配置文件，用于描述一个项目，包括我们init时的设置、开发环境、生成环境的依赖插件及版本等。
package-lock.json：普通package.json文件“^2.0”这样写的，意味着版本可以大于等于2.0，如此就会出现各种错误。

node_modules:通过npm install安装的依赖代码库

使用vue create app
    1.使用vue create图形化界面创建
    2.产生目录及说明
	node_modules:通过npm install安装的依赖代码库
	public:部署到生产环境的目录
	src:源码
	.gitignore：git忽略里面设定的这些文件的提交
	babel.config.js:babel转码配置
	package.json：项目的配置文件，用于描述一个项目，包括我们init时的设置、开发环境、生成环境的
	依赖插件及版本等。

	总结vue create和vue init 的区别
    vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项度目，
与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档网页。
    vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。
	vue-cli2.x项目向专3.x迁移只需要把static目录复制到public目录下，
老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行属配置)。

以上介绍均是基于2.0的，在上述例子之后，执行 vue create xxx,会提示版本如下
在这里插入图片描述
把2.0没有@的vue-cli卸载了，装有@的@vue-cli3.0脚手架。
顺着提示创建结束后执行npm run serve可以看见显示运行成功。
在这里插入图片描述

参考文章：

1.vscode怎样搭建vue开发环境
https://www.php.cn/tool/vscode/440175.html
2.vue新建项目(一)vue-cli新建模板项目
https://blog.csdn.net/zhuming3834/article/details/72778147
3.使用vue create、vue webpack init 创建vue项目产生的项目文件区别说明
https://blog.csdn.net/zyj123__/article/details/106361850
VUE3初学入门-01-安装环境
袁杨的飞 - CSDN专栏
06-04 185
菜单【终端】选择【新建终端】，默认会在Windows系统下的用户目录下，录入命令进入工作区并创建项目（如果没有安装过create-vue应用，系统会安装，前置是需要互联网）修改一个内容，看看结果。修改后保存即可，不用重新启动，页面自动刷新（如果不刷新，按F12，在网络页签选中【禁用缓存】并在浏览器刷新页面。菜单【文件】选择【将工作区另存为…】，保存到刚刚建立的空目录。在自己的工作硬盘上，创建一个空目录，如TestVue3。前置条件：安装node.js和npm。
搭建vscode+vue环境
易天海
05-04 1105
原文：https://blog.csdn.net/mao834099514/article/details/79138484 一、安装vue.js 1.简介 Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一...
在VScode搭建Vue环境
jiey0407的博客
06-21 657
目录参考文章0、下载vscode1、下载nodejs2、nodejs环境配置(3条消息) 2020-11-20_happyinsource的博客-CSDN博客(5条消息) VSCode安装教程（超详细）_牛哄哄的柯南的博客-CSDN博客_vscode安装教程下载 | Node.js 中文网安装教程(3条消息) node.js安装及环境配置超详细教程【Windows系统安装包方式】_明金同学的博客-CSDN博客_nodejs安装及环境配置安装完成后在dos窗口可以输入node -v查看是否安装成功如果没有输出
vue脚手架搭建
qq_42401946的博客
04-19 643
安装node.js Vue脚手架自带配置： 安装Vue脚手架，通过Vue脚手架创建项目 配置router路由，vuex，scss 第三方ui库： 配置Element-UI组件库 请求接口： 配置axios库 一、 安装node，vscode 二、 全局安装脚手架vue-cli 链接：https://cli.vuejs.org/zh/guide/creating-a-project.html 命令：npm install -g @vue/cli 三、 选择项目存放路径，创建一个项目 命令：vue crea.
在VS Code中创建Vue项目
最新发布
nan2008zzu的专栏
04-17 1944
在VS Code中创建Vue项目的一般步骤如下：1、安装Node.js和npm、2、安装Vue CLI、3、创建Vue项目 本文创建的是带router的vue项目
VUE-脚手架搭建
xhmico的博客
12-15 3483
vue 有两个大版本，分别是 vue-2 和 vue-3，目前新项目的话用 vue-3 的会比较多以下我会分别提供搭建 vue-2 和 vue-3 脚手架的过程。
【Vue】脚手架搭建
z914020826的博客
11-03 2192
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。
vue 脚手架搭建
qq_45725851的博客
07-11 5072
vue 脚手架搭建
VSCode+Vue|用vscode开发vue页面|vue入门
qq_44155199的博客
08-14 5866
vue入门 安装vscode编译器 创建一个文件，命名为 vue.html并且引入vue.min.js vue.min.js文件如下 /*! - Vue.js v2.5.17 - (c) 2014-2018 Evan You - Released under the MIT License. */ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"fun
手把手教你入门vue+springboot开发（二）--vue入门
dreamflyly的博客
06-08 1239
前面我们构建了一个查询用户信息的简单springboot后端demo，今天我们先搭建VSCode+vue的开发环境，然后在这个开发环境上构建一个demo，连接后台springboot demo查询用户信息。
环境准备和快速搭建入门 VS Code + Element-UI + Vue 3
weixin_48816152的博客
05-10 1124
根据你的操作系统选择对应的安装包，如Windows系统选择Windows Installer，Mac系统选择macOS Installer，Linux系统选择Linux Binaries。4. 安装npm：npm是Node.js的包管理工具，通常会随Node.js一起安装。在Mac系统中，打开安装包并将Node.js拖动到“Applications”文件夹中即可完成安装。2. 安装Node.js：下载完成后，双击安装包并按照提示进行安装。在项目创建过程中，选择手动配置，并选择 Vue 3 作为项目的版本。
vue 脚手架创建
qq_43826626的博客
04-22 1526
脚手架是什么呢，就是vue自动创建脚手架的项目模板，用于搭建项目的整体骨架，就比如后端开发时，咱们可以创建一个空项目，一步步创建为mvc项目，但是vs封装了mvc的框架，我们可以直接生成整体框架，其中包括基础包和一些重要文件，脚手架的创建也是同样的效果。
Vue脚手架搭建
webDevelopSnail的博客
10-28 341
Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构。 A.安装3.x版本的Vue脚手架： npm install -g @vue/cli B.基于3.x版本的脚手架创建Vue项目： 1).使用命令创建Vue项目 命令：vue create my-project 选择Manually select features(选择特性以创建项目) 勾选特性可以用空格进行勾选。 是否选用历史模式的路由：n ESLint选择：ESLint + Standard config 何时进行ESLint语法校验：Lint
vue脚手架的搭建
悦.L的博客
11-13 496
我们学完vue最核心的内容组件之后，我们来了解一下vue脚手架的内容。 什么是脚手架 脚手架就是一个用于快速搭建项目的骨架，对项目所依赖的配置进行初始化的工具。我们利用这个工具可以自动生成一个基于Vue.js的单页面应用的脚手架项目 关于脚手架 在Vue.js中，这个脚手架就是Vue CLI。在最新版本中，Vue CLI有三个组件： CLI(@vue/cli )：全局安装的npm包，提供了终端里的vue命令。 CLI服务(@vue/cli-service)：CLI服务是一个开发环境依赖。它是一个npm.
vscode配置vue2.0开发环境
06-28
### 回答1： 1. 安装Node.js和npm 首先，需要安装Node.js和npm。Node.js是一个JavaScript运行环境，而npm是Node.js的包管理器。在安装Node.js的同时，npm也会被安装。 2. 安装Vue CLI Vue CLI是一个官方的脚手架工具，可以帮助我们快速创建Vue项目。可以使用npm全局安装Vue CLI： npm install -g @vue/cli 3. 创建Vue项目 使用Vue CLI创建Vue项目非常简单。在命令行中进入项目目录，然后运行以下命令： vue create my-project 其中，my-project是项目名称，可以根据自己的需要进行修改。 4. 安装Vue插件 在VS Code中，需要安装Vue插件才能更好地支持Vue开发。可以在扩展商店中搜索Vue插件，然后安装即可。 5. 配置VS Code 在VS Code中，需要进行一些配置才能更好地支持Vue开发。可以在用户设置中添加以下配置： "emmet.syntaxProfiles": { "vue-html": "html", "vue": "html" }, "files.associations": { "*.vue": "vue" } 这样，就可以在Vue文件中使用Emmet语法，并且VS Code会将Vue文件识别为HTML文件。 6. 开始开发 现在，就可以开始使用VS Code进行Vue开发了。在VS Code中打开项目文件夹，然后在终端中运行以下命令： npm run serve 这样，就可以启动开发服务器，然后在浏览器中访问http://localhost:8080，就可以看到Vue应用程序了。 ### 回答2： VSCode是一个强大的、轻量级的、开源的代码编辑器，官方维护者是微软。它具有众多的代码编辑器特性，同时也具有调试器和Git集成等功能，适用于广泛的编程任务。VSCode也支持VUE 2.0 框架的开发，我们可以按照以下步骤来配置vue2.0开发环境。 第一步：安装VSCode编辑器。可以从官网下载并安装。 第二步：安装Node.js。Node.js是一个JavaScript运行环境，VSCode依赖它来运行Node.js程序。可以从官网下载并安装Node.js。 第三步：创建Vue.js项目。使用Vue.js提供的脚手架Vue-CLI，在终端中输入以下命令： ``` npm install -g vue-cli ``` ``` vue init webpack vue-demo ``` 其中，”vue-demo”为项目的名称，可以自定义。 第四步：安装开发需要的依赖包。在终端中切换到项目目录下，并输入以下命令： ``` cd vue-demo ``` ``` npm install ``` 这样会在项目中安装一系列开发所需的依赖包。 第五步：在VSCode编辑器中打开项目。在VSCode编辑器中，点击“文件”->“打开文件夹”，选择刚才创建的vue-demo项目所在的文件夹即可。 第六步：安装VSCode插件。为了提高开发效率，在VSCode中安装一些常用的插件是非常必要的。 在“扩展”栏中搜索以下插件并进行安装：Vue.js Extension Pack、Vetur、ESLint、Prettier - Code formatter。这些插件分别用于Vue.js开发的支持和工具、Vue.js模板和语法的高亮显示、检查和修复代码风格，以及代码格式化等功能。 安装完成后，VSCode会提示重新启动编辑器，上述步骤完成后，我们就可以使用VSCode编辑器开发Vue.js 2.0应用了。 ### 回答3： 要配置VSCode的Vue2.0开发环境，需要完成以下步骤： 1.安装VS Code： 首先要下载并安装Visual Studio Code。可以在官方网站https://code.visualstudio.com/下载正确版本的VSCode. 2.安装Vue.js 扩展： 在VSCode市场搜索"Vue.js"，然后安装扩展包 "Vetur"，这个插件不仅支持Vue.js 开发，同时也支持TypeScript、CoffeeScript、LESS、SCSS、PostCSS和markdown。 3.安装Node.js和npm：为了让你的Vue.js项目运行，你也需要在你的系统中安装Node.js，及npm包管理系统。 4.在VS Code集成终端内安装vue-cli： 打开VSCode后，在菜单栏的“视图”中，选择“集成终端”。在终端里输入命令： npm install -g vue-cli 然后在集成终端中运行如下命令来创建新的Vue.js项目： vue init webpack my-vue-project 5.启动Vue.js项目：下载项目依赖包后，你需要在项目根目录下输入命令： npm run serve 如果安装并运行完成后，此时访问http://localhost:8080，你就可以看到Vue.js的欢迎页了！ 现在，你已经成功的把VSCode与Vue.js2.0项目中的Vetur插件集成在一起了。你可以通过如下方式来编辑你的Vue.js文件，Vetur插件会为你的Vue文件增强语法高亮、智能感知、美化等。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值