Vue学习02-vie_cli


学习来源:渡一教育

关于Vue-cli

vue-cli是一个脚手架工具,集成了诸多前端技术,包括但不限于:

  • webpack
  • babel
  • eslint
  • http-proxy-middleware
  • typescript
  • css pre-prosessor
  • css module
  • ...

Vue-cli的安装

安装node

下载node: https://nodejs.org/zh-cn/

进入官网,下载安装

node

验证安装,打开终端,查看nodenpm版本,验证是否安装成功:

node -v
npm -v

配置源地址

默认情况下,npm安装包会从国外地址下载,速度很慢,容易导致安装失败,因此需要事先配置npm源地址,使用下面的命令更改为淘宝源:

npm config set registry http://registry.npm.taobao.org/

查看是否换源成功:

npm config get registry

安装vue-cli

使用以下命令安装vue-cli工具

npm install -g @vue/cli

安装好后,查看版本,检查是否安装成功:

vue --version

vue-cli的使用

1.在终端中进入工程目录

2. 搭建工程

使用vue-cli提供的命令搭建工程

vue create 工程名

工程名只能出现英文、数字和短横线

3.构建打包

工程搭建好后,在终端中进入工程目录,运行以下命令:

npm run build

运行查看效果

npm run serve

工程结构

成功创建工程后,会自动创建一个工程目录,结构如下所示:

  • node_modules目录存放项目里依赖的其他第三方库
  • public目录存放前端页面及元素
  • src目录存放项目代码资源
  • assets目录存放静态资源(图片、全局CSS等)
  • package.json描述工程信息

评论已关闭

https://file.ztongyang.cn/yang/picttures/QQqr.jpg https://file.ztongyang.cn/yang/picttures/wechatqr.png https://metu.ztongyang.cn/a/avatar.jpg avatar

南玖

生命不息,折腾不止

  网站咨询
  •   当前在线1人
  •   加载耗时25 ms
  •   文章数目40篇
  •   分类总数10个
  •   评论总数46条
  •   站点字数3.84 W
  •   运行时间12天
  访问信息
  •   
  •   2020-08-06 06:43:49 Thu
  •   ?浏览器
  •   操作系统
  热门文章