vue项目编译与运行_梦幻通灵的博客-程序员秘密

vue作为一种前端框架，在当前项目中具有很大的应用场景。那么从码云或github上下载的vue项目在本地如何看效果呢，这里记录一下搭建的过程，方便之后的查看。之前本地电脑还安装了node.js的环境，这里不再说明，具体可以参考网上的教程。

1、安装npm

有时候用npm下载依赖，速度较慢，可能会出现失败，可以安装国内的镜像如cnpm，安装npm的命令如下。

npm install -g cnpm --registry=http://registry.npm.taobao.org
// 若运行失败的话 可以确认一下npm的版本
npm -v
// 可以试试升级为最新的版本
npm install -g npm

2、安装模块管理器 webpack

为了方便对项目中的各种资源文件，如js，image等进行管理，可以安装webpack模块加载器。安装命令如下。

npm install webpack -g

3、安装脚手架 vue-cli

vue-cli 是vue的脚手架，通过安装它，可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。安装命令如下。

cnpm install vue-cli -g
// 查看版本
vue --version

安装成功后，vue的环境就安装好了，可以下载源码文件，尝试运行项目。

4、查看启动方式

对源码解压，在解压后源码文件夹的 package.json 文件中，可以看项目启动的方式，如 start : npm run dev，注意有些可能不是 dev
在这里插入图片描述
程序底层开始执行底层相当执行 dev后面的命令 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js命令，执行命令生成一个 node_modules 文件夹，里面是下载的依赖信息。

注意：文件夹中已经存在node_modules文件夹，需要将其删除，重新下载，否则可能导致启动不成功！

5、浏览器打开

启动成功后，会自动跳转到登录页面，这样再运行后台的程序，就可以进行登录操作了。
在这里插入图片描述

参考博客

【1】https://blog.csdn.net/qq_44900944/article/details/98760857?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_allfirst_rank_v2~rank_v25-7-98760857.nonecase

本文链接：https://blog.csdn.net/u012190388/article/details/107722486

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

IIS7的架构_weixin_30367543的博客-程序员秘密

尽管IIS 7.0的架构与IIS 6.0差异甚大，甚至IIS 7.0代码库都是完全重新编写的，但是IIS家族系列中的许多概念和大多数架构仍然延续下来。尽管可以编写管道模块来代替多数ISAPI应用程序，但是ISAPI仍然存在。工作进程和应用程序池也依然存在，进程隔离也以类似的方式继续发挥作用，inetinfo.exe和Http.sys仍然执行类似的功能。然而，在IIS 7.0中，Web服...

Token验证详解_uid和token_wepe12的博客-程序员秘密

为什么使用Token验证：在Web领域基于Token的身份验证随处可见。在大多数使用Web API的互联网公司中，tokens 是多用户下处理认证的最佳方式。以下几点特性会让你在程序中使用基于Token的身份验证 1.无状态、可扩展 2.支持移动设备 3.跨程序调用 4.安全那些使用基于Token的身份验证的大佬

Android开发细节_qijingwang的博客-程序员秘密

Android开发中有一些小的知识点，了解了不仅能能够避免很多坑，同时也能够简化开发过程，提高代码的健壮性。分割线分割线是Android开发中一个常用的UI元素，我们可通过定义一个View，并设置背景来实现，但其实AbsListView和LinearLayout都提供了分割线的功能:AbsListViewAbsListView通过divider和dividerHeight来控制分割线的样式，通常情...

解读两大精简指令集：RISC-V和MIPS_mips和riscv_OnePlusZero的博客-程序员秘密

来源：内容来自「SIMIT战略研究室」，谢谢。当前CPU的两大架构是CISC（复杂指令集）和RISC（精简指令集），x86是CISC的代表架构，占领了95%以上的桌面计算机和服务器市场。Arm作为RISC的一种，在智能手机、可穿戴设备等移动处理器市场占领主要地位。针对物联网、5G、AI新兴领域的应用，RISC-V和MIPS两大精简指令集架构再次登上历史舞台。- RISC-V -...

Scrapy爬虫笔记_junli_chen的博客-程序员秘密

Scrapy是一个优秀的Python爬虫框架，可以很方便的爬取web站点的信息供我们分析和挖掘，在这记录下最近使用的一些心得。1.安装通过pip或者easy_install安装:1sudo pip install scrapy2.创建爬虫项目1scrapy startprojec

网易刷题_草莓味的狮子座leo的博客-程序员秘密

聊聊rem与em的区别rem：相对于页面根元素 em：相对于父元素移动端如何适配盒模型W3C标准盒子：width=contentIE盒子：width=content+padding+margin实现一下垂直居中和水平居中的不同实现方式margin：上右下左水平居中：1）行内元素text-align：center 2）块级元素margin：0px auto3）子元素display: flex; justify-content: center;垂直居中：1）inline-heig.