如何启动vue.js项目

启动vue.js项目的方法:首先使用“cd 项目名称”命令进入项目目录中;然后使用“npm install”命令安装依赖;最后使用“npm run dev”命令启动项目即可。

如何启动vue.js项目

本教程操作环境:windows7系统、vue2.9版,该方法适用于所有品牌电脑。

相关推荐:《vue.js教程》

启动运行vue.js项目(维护他人的项目)的方法

1:安装cnpm

立即学习“前端免费学习笔记(深入)”;

由于npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像—cnpm
在命令行中输入

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

登录后复制

1.webp.jpg

2:安装webpack

npm install webpack -g

登录后复制

webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。 webpack 的核心是 依赖分析,把依赖分析出来了,其他都是细枝末节。

2.webp.jpg

3:安装vue-cli

cnpm install vue-cli -g

登录后复制

vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,这个过程会耗时十几秒,等走完就好;好了,到此整个环境就搭建好了

3.webp.jpg

4:cd /项目名称
下面就是运行项目了,cd /项目名称,我的文件放在D盘,所以先进入d盘,再进入项目。

cd ShopApp

登录后复制

4.webp.jpg

5:安装依赖

进入项目之后安装依赖,安装成功

5.webp.jpg

注意:在这一步可能会出现这样的错误;因为你打开的是别人的项目,项目之中肯定有 node_modules模块,那么先删除掉,在执行npm install命令

6.webp.jpg

6:启动项目

一切准备就绪,启动项目

npm run dev

登录后复制

7.webp.jpg

7:自动启动浏览器就会打开项目了

在浏览器中输入http://localhost:8080/#/;进入项目首页

若是要访问其他页面,直接在#后面加上组件名称即可:例如http://localhost:8080/#/adjustIntegral

相关推荐:

2020年前端vue面试题大汇总(附答案)

vue教程推荐:2020最新的5个vue.js视频教程精选

更多编程相关知识,请访问:编程教学!!

以上就是如何启动vue.js项目的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3021117.html

(0)
上一篇 2025年3月13日 05:42:43
下一篇 2025年2月18日 13:23:44

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vue.js如何使用filter

    vue.js使用filter的方法:1、定义无参全局过滤器,代码为【Vue.filter(‘msgFormat’, function(msg)】;2、定义有参全局过滤器,代码为【Vue.filter(‘m…

    2025年3月13日
    200
  • 怎样安装vue.js

    安装vue.js的方法:1、在Vue.js的官网上直接下载vue.min.js并用标签引入;2、使用CDN方法来安装vue.js;3、使用淘宝的镜像及其命令cnpm来安装vue.js。 本教程操作环境:windows7系统、vue2.0版,…

    2025年3月13日
    200
  • vue.js支持移动端开发吗

    【vue.js】支持移动端开发,以制作移动端的Webapp,针对于移动端,首选vue;入门成本低,快速上手,可以结合【i-view】,Element UI等一些成熟的前端UI库一起开发。 本教程操作环境:windows7系统、Vue2.9.…

    2025年3月13日
    200
  • vue.js与css区别是什么

    vue.js与css区别:1、vue.js是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架;2、CSS是一种用来表现HTML或XML等文件样式的计算机语言,是用来表示html样式的一种编程语言。 本…

    2025年3月13日
    200
  • 使用vue.js怎么定义全局变量

    使用vue.js定义全局变量的方法:首先单独新建一个全局变量模块文件,模块中定义一些变量初始状态;然后在【main.js】中引入,并通过【Vue.prototype】挂载到vue实例上面。 本教程操作环境:windows7系统、Vue2.9…

    2025年3月13日
    200
  • vue.js适用于什么

    vue.js适用于当jquery频繁操作DOM来更新页面时来解放DOM操作,也适用于当项目中有多个部分是相同的,并可以封装成一个组件时。 本文操作环境:windows10系统、vue 2.9、thinkpad t480电脑。 推荐:《vue…

    2025年3月13日
    200
  • vue.js主要应用哪方面

    vue.js主要应用的方面有:1、针对具有复杂交互逻辑的前端应用;2、它可以提供基础的架构抽象;3、可以通过AJAX数据持久化,保证前端用户体验。 本文操作环境:windows10系统、vue 2.9、thinkpad t480电脑。 推荐…

    2025年3月13日
    200
  • django和vue.js区别是什么

    django和vue.js的区别:1、Django是一个开放源代码的Python Web应用框架,便于快捷地创建高品质、易维护、数据库驱动的应用程序;2、【Vue.js】的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。 本…

    2025年3月13日
    200
  • vue-mobile是什么

    vue-mobile是一个用于SPA的基于Vue.js的UI框架,其包含完整的页面结构、转场动画和大量UI组件,如果你想用vuejs开发移动应用,那么vue-mobile可能是一个不错的选择。 本文操作环境:windows7系统、Dell …

    2025年3月13日
    200
  • vue.js能用正则表达式吗

    vue.js能用正则表达式,其使用语法如“this.taskInfo.amount = (money.match(/^(0|[1-9][0-9]*)/g)[0]) || null/^(0|[1-9][0-9]*)/g)[0]”。 本教程操作…

    2025年3月13日
    200

发表回复

登录后才能评论