正文

如何运行一个vue工程

成长中的小牛  成长中的小牛  2022-08-29  111

关键词：

在师兄的推荐下入坑vue.js 发现无法运行GitHub上的开源项目。通过查阅网上教程，成功搭建好项目环境，同时对前段工程化有了朦朦胧胧的认知，因此将环境搭建过程分享给大家。

首先，列出来我们需要的东西：

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.taobao.org 然后等待，安装完成如下图。

完成之后，我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的，查看淘宝npm镜像官网。

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

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

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

用vue-cli构建项目

要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录。在这里，我选择桌面来存放新建的项目，则我们需要先把目录cd到桌面，如下图。

在桌面目录下，在命令行中运行命令 vue init webpack firstVue 。解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中（我的实例中，会在桌面生成该文件夹），如下图。

运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。

打开firstVue文件夹，项目文件如下所示。

这就是整个项目的目录结构，其中，我们主要在src目录中做修改。这个项目现在还只是一个结构框架，整个项目需要的依赖资源都还没有安装，如下图。

安装项目所需的依赖

要安装依赖包，首先cd到项目文件夹（firstVue文件夹），然后运行命令 cnpm install ，等待安装。

安装完成之后，会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。

安装完依赖包之后，就可以运行整个项目了。

运行项目

在项目目录中，运行命令 npm run dev ，会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

这里简单介绍下 npm run dev 命令，其中的“run”对应的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一个快捷方式。

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

如果看到这个页面，说明项目运行成功了。

如何运行一个vue项目(代码片段)

...刚入手vue.js的人，会扒GitHub上的开源项目，但是发现不知如何运行GitHub上的开源项目，很尴尬。通过查阅网上教程，成功搭建好项目环境，同时对前段工程化有了朦朦胧胧的认知，因此将环境搭建过程分享给大家。首先，列出来... 查看详情

如何搭建一个基于egg+webpack+vue的服务端渲染工程项目呢？

如何搭建一个基于Egg+Webpack+Vue的服务端渲染工程项目呢？项目你可以通过easywebpack-cli直接初始化即可完成或者cloneegg-vue-webpack-boilerplate。下面说明一下从零如何搭建一个Egg+Webpack+Vue的服务端渲染工程项目。通过egg-init初始化egg项... 查看详情

如何将vue工程部署到nginx下

参考技术A如何将vue工程部署到nginx下官网:http://nginx.org/en/download.html我这里是新建了一个名为'www'的文件夹，可以自己命名关键配置信息查看详情

vue3-javascript如何使用vue3创建一个基于webstorm开发自动提示和自动格式化代码规则的工程！

...建流程【取消其中的TypeScript安装】即可【Vue3-TypeScript】如何使用vue3创建一个基于【webstorm开发】自动提示和自动格式化代码规则的工程！_比特币爱好者007的博客-CSDN博客第二种方法：更简单【选择安装默认的JavaScript版本... 查看详情

codeblocks多个文件如何切换编译

参考技术A遇到的问题：第一个文件编译运行正常，第二个文件无法编译，点击运行还是第一个文件的结果原因：一个工程只能有一个main函数，每次运行都会从main函数进入，第二个文件也有一个main函数，导致冲突解决办法：修... 查看详情

如何运行一个vue项目

第一次（自动变色）NO.1安装cnpm为了提高速度，在命令行中输入npminstall-gcnpm--registry=http://registry.npm.taobao.org NO.2安装webpack它是一款模块加载器兼打包工具npminstallwebpack-gNO.3安装vue-cli它是vue.js的脚手架，用于自动生成vue.js+webpack... 查看详情

android如何运行他人工程

首先新建一个本地的新工程做对比，用记事本打开以下的几个工程文件，把本地工程文件的内容覆盖掉他人工程的文件内容，注意只覆盖两个工程共有的内容条目即可，不要删掉他人工程的其他依赖！（具体哪几个文件... 查看详情

vue环境配置脚手架环境搭建vue工程目录

...js,并且安装!下载地址:nodejs.cn/download安装完成之后,windows+r运行命令cmd 输入node-v 检查是否已经安装成功.如果会显示版本信息,说明安装成功!现在就可以使用node中的npm包管理器来构建vue项目第一步,由于npm直接下载资源网速... 查看详情

快速创建一个vue工程，了解vue工程结构（idea版）(代码片段)

快速创建一个vue工程，了解vue工程结构（IDEA版）文章目录快速创建一个vue工程，了解vue工程结构（IDEA版）前言：1、准备工具1.1、安装Node.js和vue-cli脚手架1.2、安装webpack1.3、安装vue-router2、快速上手创... 查看详情

如何在vs一个工程里面测试不同代码？（创建不同项目，并将需要运行的项目设为启动项目）

查看详情

如何在webstorm下调试vue工程

参考技术Agitclone下来，直接用webstorm打开查看详情

如何让androidstudio运行eclipse结构的工程

步骤如下：点击open一个ExistingProject(非import)File—>ProjectStructure选择sdk,这里选择个AndroidSdk,编译输出里选[工程目录]/bin2.配置Modules.选中Modules.先把右边的ContentRoot删掉再重新导入一次,不然看不到目录列表点击AddContentRoot,选择工程... 查看详情

flutter如何新建项目，运行你的第一个flutter工程项目(代码片段)

📝【Flutter】学习养成记，【程序员必备小知识】📔今日小知识——flutter运行项目实战！1.终端命令行新建项目在flutter新建项目之前，我们先来运行一下flutterdoctor命令来检查一下自己的flutter环境是否有问题... 查看详情

cordova与vue2集成

...cordova的project2)为cordova项目添加platformproject3)在相关平台运行app4)用指定模拟器运行cordova工程1)安装vue-cli2)创建工程*两个创建的工程放在平级3)安装vue依赖包4)安装Vue-router，Vuex和Mint-ui5)修改webpack.config.jspath指的是我们cordova里的www/... 查看详情

1-1课程介绍

vue-cli这个项目构建工具的使用。使用vue-cli去构建一个vue.js标准的大型工程的工程目录，那么我们会在这个vue-cli构建的工程之下，重新去实现TodoList这个功能。在vue-cli构建的工程里面如何去编写vue的代码。查看详情

directx学习之第一个可运行的工程(代码片段)

...tps://www.xuanyusong.com/archives/802),但是看了之后，还是不知道如何才能运行起来。然后，又参考了一篇文章(https://blog.csdn.net/chenwu_843402773/article 查看详情

如何安装wdk并运行编译一个工程

参考技术A1、安装VS2010，安装WDK7.0(DDK);2、新建VC++->EmptyProject3、打开ConfigurationManager并新建一个名称为“dirver”的SolutionConfiguration并将“dirver”设为ActiveSolutionConfiguration.4、打开View->propertyManager。5、在"dirver"solutionconfigu... 查看详情

如何在 Vue 和 Snowpack 中配置运行时编译

】如何在Vue和Snowpack中配置运行时编译【英文标题】：HowtoconfigureruntimecompilationinVueandSnowpack【发布时间】：2021-02-2411:40:02【问题描述】：我正在尝试通过运行时编译来设置Vue项目，但我不太确定如何在Snowpack中进行配置。目前，... 查看详情