Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统
Vue CLI: Vue command line interface vue命令行接口
特点:
1.一个运行时依赖 (@vue/cli-service),该依赖:
2.可升级;
3.基于 webpack 构建,并带有合理的默认配置;
4.可以通过项目内的配置文件进行配置;
5.可以通过插件进行扩展。
6.一个丰富的官方插件集合,集成了前端生态中最好的工具。
7.一套完全图形化的创建和管理 Vue.js 项目的用户界面。
安装webpack工具
在安装脚手架之前确保webpack是否安装成功:
1.webpack --version #如果查看有版本,无需安装以下步骤,如果没有版本,则需要执行以下步骤
2.cnpm i webpack webpack-cli -g #全局安装webpack打包工具
注意事项: 以上步骤不一定必须执行
安装脚手架
1.npm i @vue/cli -g #全局安装脚手架
2.vue -V #查看版本
通过脚手架创建项目
1.vue create 项目名称 #创建项目
2.cd 项目名称 #进入项目目录
3.npm run serve #启动项目
4.项目运行在: http://localhost:8080
npx Vue -V #查看版本
npm i -D @vue/cli@4.5.15 #安装指定版本,不是全局安装
my-app
node_mopdules #项目依赖包
public #公共静态资源文件
1.引入图片
<!-- 引入public图片, 采用项目绝对路径, -->
<img style="width:100px" src="/qkl.jpeg" alt="">
2.静态资源不参与压缩打包
index.html #项目唯一一个页面
src
assest #静态资源文件
1.引入图片
<!-- 引入assets图片,采用相对路径 -->
<img style="width:100px" src="../assets/img/qkl.jpeg" alt="">
2.静态资源参与压缩打包
components #公共组件
App.vue #根组件
main.js #唯一入口文件
.gitignore #上传git忽略的文件
babel.config.js #babel插件的配置文件
package-lock.json #项目基本信息及安装依赖包的锁定版本
package.json #项目的基本信息及启动指令 依赖包信息
READ.me #解读文件