运行vue项目

运行vue项目相关知识

• 如何运行vue项目

  首先，列出来我们需要的东西：  node.js环境（npm包管理器）vue-cli 脚手架构建工具cnpm  npm的淘宝镜像 安装node.js从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。 安装完成之后，打开命令行工具，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。  npm包管理器，是集成在node中的，所以，直接输入 npm -v就会如下图所示，显示出npm的版本信息。  OK！node环境已经安装完成，npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像---cnpm。安装cnpm在命令行中输入 npm install -g cnpm --registry=http://registry.npm.ta
• mac如何运行VUE项目

  大家好，我是灰大狼. 最近在做一个前后端分离的项目，前端用的是vue，由于以前没有接触过，所以今天初步学习了下vue，vue我就不介绍了，这里主要给大家分享的是vue项目如何运行，由于我用的是mac，跟windows安装环境不太一样，这里主要说的是mac下如何安装环境以及运行一个vue项目。 安装node.js 下载 进入nodejs官网下载node.js，我下载的版本是12.14.0 安装 按照步骤一步步来，即可安装完成，此时node和npm都一起给安装好了 验证 node -v #查看node版本 npm -v #查看npm版本 由
• 如何运行vue项目（维护他人的项目）

  假如你是个小白，在公司接手他人的项目，这个时候，该怎么将这个项目跑通？ 前提： 首先，这个教程主要针对vue小白，并且不知道安装node.js环境的。言归正传，下面开始教程：在维护项目之前，需要把所有的环境搭建好，这里我就不多说了，看这篇就够了：十分钟上手-搭建vue开发环境（新手教程）https://www.jianshu.com/p/0c6678671635 好了，再重复具体不嫌麻烦的把步骤操作一遍，做技术就得孰能生巧，一遍又一遍不断的重复 如下： 1：安装cnpm 由于npm有些资源被屏蔽或者是国外资源的原因
• Vue项目开发环境安装、项目构建运行、打包部署详解

  1. 背景 Vue工程化项目环境配置还是比较麻烦的，本篇来详细的记录下从0开始的安装、构建、打包、运行全过程。 2. 整体步骤 第一，安装Node.js，这个是前端工程化项目运行的基础环境。 第二，安装Vue，使我们前端开发环境可以支持Vue开发。 第三，安装Vue CLI,这是Vue提供的交互时的项目脚手架，有点难理解是吧，其实就是一个快速构建Vue工程的小工具，通过Vue CLI，开发人员可以使用命令行或者可视化界面快速构建Vue工程项目。 第四，我们通过Vue CLI提供的可视化工具来构建一个Vue工

运行vue项目相关课程

• Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲 这是一门重技术讲解的课程，通过一个Todo应用深入讲解Vue应用开发，Vue+Webpack工作流搭建，Vue+Vue-Router+Vuex项目架构和Vue服务端渲染深度集成，以此给学员展示Vue应用开发中的各种问题和优质解决方案。

  讲师：Jokcy 高级 3116人正在学习

• Taro3+Mysql+Express开发企业级出行全栈项目 Taro3在多端的基础上，实现了跨框架，从开始的 React/JSX 开发，到现在的 React、Nerv、Vue 2、Vue 3 四种框架的支持，同时还有jQuery的支持，是我们目前多端开发的最佳选择。本课程通过一套可在微信、支付宝、百度运行的全栈小程序（包括H5端），带大家学习Taro开发，踏平多端编译的各种坑，寻求Taro中的各种优秀技术方案。

  讲师：不浪 中级 86人正在学习

• Vue + EChart 4.0 从0到1打造商业级数据报表项目 数据可视化是大厂的硬性标配，是中小企业的紧迫要求，而前端数据可视化是让你快速获得“前端差异化”竞争力的突破点。本课程将手把手带你用 Vue + EChart4.0 从0到1完成一个热门的外卖报表项目，助力你快速成为企业急需的前端数据可视化人才。

  讲师：Sam 中级 5634人正在学习

运行vue项目相关教程

• 3.3 运行及发布项目 如果是通过 vue-cli 进行开发，可以在命令行运行下面代码来运行发布项目。npm run dev:custom mp-dingtalk npm run build:custom mp-dingtalk如果通过 HBuilderX 进行开发， HBuilderX 开发工具会根据package.json 文件中的配置，在运行和发行菜单下生成自定义菜单。如果package.json中的配置添加完成后，HBuilderX 开发工具没有帮我们自动生成自定义菜单，我们可以先编译一下项目，比如点击运行–运行到内置浏览器。编译完成后，自定义菜单就会出现了。最后我们点击对应的菜单编译运行项目就可以了，如下图：
• 3.4 运行项目 我们来将上面添加的 HelloWorld 运行起来吧。1. 运行到浏览器点击工具栏中的运行->运行到浏览器->选择相应的浏览器运行：选择浏览器之后，HBuilderX 开发者工具会出现正在编译的提示，第一次运行会慢一点，编译成功后，自动打开浏览器并显示项目的页面。可以看到 HelloWorld 打印出来了。2. 运行到内置浏览器点击工具栏中的运行->运行到内置浏览器，会出现一个 Web 浏览器的弹出框，第一次打开会比较慢，需要耐心等一会才会出现项目的页面。3. 运行到手机或模拟器使用这个功能需要先用数据线连接手机，否则会提示“未检测到手机或模拟器，请稍后再试”。数据线连接手机后，我们再点击工具栏中的运行->运行到手机或模拟器。系统会自动在我们手机上面安装 HBuilderX 手机版。在手机上面打开 HBuilderX 手机版，就可以看到 HelloWorld 页面。Tips：如果打开手机版 HBuilderX 没有看到正确的页面，可以关掉手机应用进程，重新打开看一下。如果编译出错，点击查看工具栏中的运行->运行到手机或模拟器->真机运行常见故障排除指南，排除错误。4. 运行到小程序模拟器第一次使用小程序模拟器，需要先安装小程序开发者工具，并在工具栏->运行->运行到小程序模拟器->运行设置中设置小程序开发者工具安装的路径。在微信开发者工具里运行点击工具栏中的运行->运行到小程序模拟器->微信开发者工具，即可在微信开发者工具里面体验 uni-app。在 HBuilderX 里面开发，微信开发者工具里面就可以看到实时效果。uni-app 会将项目编译到根目录的 unpackage/dist 目录下面。Tips：如果没有成功运行可以做下面的操作。如果微信开发者工具已经打开，关闭微信开发者工具，重试一下；如果还是不行的话，建议将微信开发者工具升级到最新版本；最后如果自动启动微信开发工具失败，可以手动在开发者工具中打开HBuilderX控制台中提示的项目路径。在百度开发者工具里运行点击工具栏的运行->运行到小程序模拟器->百度开发者工具，在百度开发者工具中打开 HBuilderX 控制台中提示的项目路径，就可以在百度开发者工具中体验 uni-app。在支付宝小程序开发者工具里运行点击工具栏的运行->运行到小程序模拟器->支付宝小程序开发者工具，在支付宝小程序开发者工具中打开 HBuilderX 控制台中提示的项目路径，就可以在支付宝小程序开发者工具中体验 uni-app。在字节跳动开发者工具里运行点击工具栏的运行->运行到小程序模拟器->字节跳动开发者工具，在字节跳动开发者工具中打开 HBuilderX 控制台中提示的项目路径，就可以在字节跳动开发者工具中体验 uni-app。
• 3. 运行项目 我们打开之前通过脚手架创建的项目，在项目的根目录下运行：npm run serve出现界面后：我们可以打开浏览器预览项目：
• 4. vue-cli 命令行创建项目 我们在终端通过 vue-cli 命令行创建 uni-app 项目，在创建项目之前，需要保证电脑已经配置了 nodejs 环境。
• 3.1 创建 uni-app 项目 直接在 HbuilderX 中创建项目，点击菜单栏-文件-新建-项目，出现创建项目的界面，选择 uni-app 项目，并选择默认模板。当然如果已经安装了 vue 运行环境，也可以使用 cli 方式创建项目，执行 vue create -p dcloudio/uni-preset-vue uniappPro 即可创建。
• 2.4 运行这个项目 在项目创建好之后，我们就来运行这个项目。在 idea 中点击Add Configuration按钮。在弹出的界面点击小+号，然后选择 Tomcat Server -> Local。在 Tomcat Server 界面的 Deployment 页签，点击小+号，选择Artifact… ，并在弹出的窗口中，选择mallweb:war exploded，并在Application context中输入/index ，最后点击OK按钮。点击Add Configuration 旁边的三角形按钮，启动项目，项目启动后控制台会输出如下日志产生。项目启动成功后，我们在浏览器中输入地址http://localhost:8080/index/，可以看到项目的欢迎页面。至此，我们的项目已经创建并启动完成。

运行vue项目相关搜索

yarn yum 压缩工具 依赖关系 移动app 移动终端 移位操作 移位运算符 异常处理 易语言教程 音频格式 音频管理器 引入css 引用类型 英语词汇 用户界面 语言编程 语言工具 语言学习 语言转换

查看更多慕课网实用课程