使用VSCode创建一个Vue项目

这篇具有很好参考价值的文章主要介绍了使用VSCode创建一个Vue项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 下载 Node.js

官网地址:Node.js ,选择长期维护版下载。

使用VSCode创建一个Vue项目

安装时可以自己选择安装位置,然后一直选择 next 即可。安装完成后,打开命令行窗口,输入 node -v ,出现了版本号信息就表示已经成功安装。

使用VSCode创建一个Vue项目

配置环境变量:node.js会在系统变量Path里自动配置好:

使用VSCode创建一个Vue项目

2. 安装 npm

由于NPM的仓库资源在国外,传输速度较慢。所以使用淘宝镜像源npm。

同样打开命令行窗口,运行以下命令进行安装。

npm install -g cnpm --registry=http://registry.npm.taobao.org

查看镜像是否安装成功:

npm config get registry

如下即说明镜像安装成功:

使用VSCode创建一个Vue项目

3. 安装 vue-cli (vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板)

npm install -g @vue/cli

检查 vue-cli 版本:命令行窗口输入:vue -V

如下即为安装成功。

使用VSCode创建一个Vue项目

4. 安装 webpack

  • webpack--一个静态的模块化打包工具,最终可以将代码打包成静态资源部署到服务器
  • npm install webpack –g # 全局安装

5. 创建项目与安装相关依赖

  • 在 VSCode 打开想要创建项目的文件夹,ctrl+j 打开控制台,也可以使用命令窗口进入到对应的文件夹,输入:Vue create project_name。注意:这里需要管理员权限运行cmd
    • vue create 项目名称

使用VSCode创建一个Vue项目

选择 Manually select features,点击回车

使用VSCode创建一个Vue项目

暂时选择 Bable 和 Router 两个选项,后续可以根据需要自行进行添加。空格是选择和取消选择,选好后回车进行下一步。

使用VSCode创建一个Vue项目

使用VSCode创建一个Vue项目

使用VSCode创建一个Vue项目

选择package.json

是否保存这次的设置?n

使用VSCode创建一个Vue项目

创建成功后,控制台输入 npm run serve 即可运行。

  • 打包命令:npm run build,生成dist文件打包给后台,项目路径中要采用相对路径
  • 安装 element-ui:cnpm install element-ui --save
  • 安装 axios:cnpm istall axios --save
  • 安装 vuex:cnpm i -S vuex@3.6.2 ,@后面可以指定版本号



 文章来源地址https://www.toymoban.com/news/detail-463628.html

到了这里,关于使用VSCode创建一个Vue项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 手把手教会你!如何快速在VSCode创建一个VUE项目|前端菜鸟进阶版

    对于刚上手的朋友,我们可以先来了解一下什么是vue: VUE :渐进式javaScript框架。 什么是JS(JavaScript):我封装好一个函数,这个函数可以给其他人调用,这个就是一个js 什么是框架:框架的规则。 在项目开始创建之前,我们需要做好以下几点准备,具体操作可在官网下载。

    2024年02月10日
    浏览(39)
  • Vue路由的使用及node.js下载安装和环境搭建

    目录 一、Vue路由 1.1 简介 ( 1 )  特点 ( 2 )  作用 1.2 实例 ( 1 )  引入 ( 2 )  组件 ( 3 )  关系 ( 4 )  路由 ( 5 )  事件 ( 6 )  锚点 二、nodeJS 2.1  下载 2.2  安装 2.3  环境搭建 新增 添加 测试 配置 运行 Vue路由是Vue.js框架中用于管理页面 导航的插件 。它允许开发者通过定义路由规

    2024年02月07日
    浏览(51)
  • Vue-Element-Admin项目学习笔记(7)用Node.js写一个简单后端接口

    前情回顾: vue-element-admin项目学习笔记(1)安装、配置、启动项目 vue-element-admin项目学习笔记(2)main.js 文件分析 vue-element-admin项目学习笔记(3)路由分析一:静态路由 vue-element-admin项目学习笔记(4)路由分析二:动态路由及permission.js vue-element-admin项目学习笔记(5)路由分析

    2024年02月09日
    浏览(47)
  • 使用node.js 搭建一个简单的HelloWorld Web项目

    文档结构 config.ini one.js 使用方法 启动内网穿透 在控制台启动js文件 访问网页 修改为8081 登录natapp官网 成功访问

    2024年02月14日
    浏览(48)
  • vue3创建项目报错Vue.js - The Progressive JavaScript Framework TypeError: (0 , import_node_ut

    报错信息: Vue.js - The Progressive JavaScript Framework TypeError: (0 , import_node_util.parseArgs) is not a function     at init (C:UsersAdministratorAppDataLocalnpm-cache_npx2f7e7bff16d1c534node_modulescreate-vueoutfile.cjs:4481:72)     at Object.anonymous (C:UsersAdministratorAppDataLocalnpm-cache_npx2f7e7bff16d1c534node_module

    2024年04月10日
    浏览(126)
  • Vue的路由使用,Node.js下载安装及环境配置教程 (超级详细)

    前言: 今天我们来讲解关于Vue的路由使用,Node.js下载安装及环境配置教程 首先我们Vue的路由使用,必须要导入官方的依赖的。 BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 https://www.bootcdn.cn/ 路由思路 1、引入路由的js依赖 2、定义组件内容用来显示网页中的内容 3、定义

    2024年02月07日
    浏览(54)
  • 使用工具 NVM来管理不同版本的 Node.js启动vue项目

    使用工具如 NVM(Node Version Manager)来管理不同版本的 Node.js。NVM 允许你在同一台计算机上安装和切换不同版本的 Node.js。以下是一些步骤,以便同时在你的系统中安装两个 Node.js 版本: 安装 NVM: 首先,你需要安装 NVM。你可以在 NVM GitHub 页面 找到安装说明。 安装 Node.js: 使用

    2024年02月04日
    浏览(57)
  • 如何使用vue ui创建一个项目?

    首先打开cmd 输入vue ui 等待浏览器打开一个窗口,按照下图操作  在\\\"功能页面\\\"中,各个插件代表以下意思: Babel:Babel是一个JavaScript编译器,用于将ES6+代码转换为向后兼容的JavaScript版本,以确保代码在旧版本的浏览器上正常运行。 TypeScript:TypeScript是一种由微软开发的静态

    2024年02月13日
    浏览(44)
  • 使用vue-cli创建第一个vue项目

    命令提示符切换至需要创建项目的目录: 直接在路径 输入cmd 在按键盘的 enter键 打开的终端就直接切换到该目录下 (1)输入以下命令: vue create 项目名称 (2)我这里选手动选择,键盘 上下 按钮,选完后按 enter键 (3)我这里选Babel和CSS,键盘 上下 按钮,选中或取消选中按

    2023年04月17日
    浏览(45)
  • npm 创建 node.js 项目

    package.json重要说明 package.json是创建任何node.js项目必须要有的一个文件。 因为在package.json文件中,有详细的项目描述, 包括: (1)项目名称:name (2)版本:version (3)依赖文件:dependencies 等等.. 1. 创建node.js项目步骤 (1) 创建package.json文件 (2) 运行npm install 创建node_modules这个文件夹

    2024年02月11日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包