首页 > Web开发 > 详细

开始Vue.js,第一个应用程序

时间:2020-05-09 02:30:56      阅读:84      评论:0      收藏:0      [点我收藏+]

开始Vue.js vue-cli

需要环境

Node.js:https://nodejs.org/en/download/

选择自己的版本

技术分享图片

 

 

 Git:https://git-scm.com/download

技术分享图片

 

 

 

 

查看是否安装了Node.js和nmp(软件包管理器)

cmd下输入node -v

npm -v

PS:Node.js安装完后自带了nmp,并且自动配置好了环境变量

 

安装Node.js淘宝镜像加速器(尽量少用,打包时有时候会有问题):-g全局安装  安装时比较慢,有可能还会失败多试几次

npm install cnpm -g

技术分享图片

 

 

安装完成后位置:

技术分享图片

 

 

安装vue-cli 

cnpm install vue-cli -g

技术分享图片

 

 

技术分享图片

测试是否安装成功,可以查看可以使用的vue应用模板

vue list

 

技术分享图片

 

 

我们之后使用webpack模板,因为vue基于es6语法,但现在很多还是基于es5语法,通过webpack打包降级,解决兼容性问题

 

创建vie-cli应用程序

 

1.创建一个项目。随意在电脑的盘符中的位置,在地址栏输入cmd进入命令行

2.通过vue init webpack myvue    (注意:myvue随意取的项目名)

输入命令后,回车,会自动出现一行英文,说是,下载模板 down template

之后,出现,说的是,Project name 项目名是否是这个myvue,回车即可

技术分享图片

 

 项目的描述,回车即可

技术分享图片

 

 作者名可以修改为自己的,嘿嘿,再次回车

技术分享图片

 

构建项目,可以上下键选择,默认回车即可

技术分享图片

 

 是否安装路由,n

技术分享图片

 

 之后一直no,直到,选择no,i will handle that myself

技术分享图片

 

 

 

整体结构

技术分享图片

 

 

此时在磁盘看到多了个文件

 

 技术分享图片

 

 技术分享图片

 

 

初始化并运行,一行一行执行   注意:前端人员要是查看运行建议看Vue.js教程中的,它有相匹配前端的软件和框架,网址:https://learning.dcloud.io/#/?vid=15

cd myvue  (进入项目目录)

npm install   (会在目录下安装下载很多的模板组件供我们使用)

npm run dev   (启动项目,相当于Tomcat启动8080端口一样)

,此时运行完npm install后出现了错误

技术分享图片

 

 我们根据它的命令进行修复即可

技术分享图片

 

 

,修复完成后,我们使用IDEA打开刚刚创建的项目,使用命令行,输入npm run dev,等待它打包启动项目

技术分享图片

 

 启动完成了,在浏览器输入,http://localhost:8080  即可看见自己创建的项目了

 

停止,在cmd输入ctrl+c

 

启动也可在idea中做

技术分享图片

 

 

 

vue项目目录结构

技术分享图片

 

开始Vue.js,第一个应用程序

原文:https://www.cnblogs.com/mumu555/p/12853876.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!