ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2020-05-08 23:55:42  阅读:313  来源: 互联网

标签:npm vue 项目 应用程序 js Vue 安装 回车


开始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项目目录结构

 

标签:npm,vue,项目,应用程序,js,Vue,安装,回车
来源: https://www.cnblogs.com/mumu555/p/12853876.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有