Vue-cli
介绍:Vue-cli是Vue官方提供的一个脚手架,用于快速生成一个Vue的模板
Vue-cli提供了以下功能:
统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
依赖环境:NodeJs
需下载安装长期维护版本的NodeJs再以管理员身份允许命令提示符
全局模块存放路径
num config prefix "NodeJs的文件路径"
切换npm淘宝资源镜像 方便后期资源下载
首先,打开命令提示符或终端,执行以下命令将npm源切换为淘宝镜像:
npm config set registry https://registry.npmmirror.com//最新
执行完这个命令后,可以通过以下命令验证是否切换成功:
如果返回 https://registry.npmmirror.com,说明配置成功。
环境准备
安装Vue.cli
npm install -g @vue/cli
安装成功
安装版本检查
vue --version
工程化Vue项目
Vue项目-创建
命令行:
vue create vue - project01
图形化界面:
vue ui
创建项目后解决报错
解决方案参考: https://blog.csdn.net/qq_40047019/article/details/132663644
Vue项目-目录结构
基于Vue脚手架创建出来的工程,有标准的目录结构如下:
- node-modules 整个项目的依赖包
- pubilic 存放项目的静态文件
- src 存放项目的源代码
- package.json 模块的基本信息,项目开发所需的模块,版本信息
- vue.config.js 保存vue配置的文件,如:代理,端口的配置等
src
- assets 静态资源
- components 可重用的组件
- router 路由配置
- views 视图组件(页面)
- App.vue 入口页面(根组件)
- main.js 入口js文件
Vue项目启动
图形化界面下运行NPM脚本
Vue项目-配置端口
在vue.config.js文件下
Vue项目的开发流程
首先通过入口文件 main.js 进入默认首页 Index.html
通过import 导入组件或模块 类似Java导包操作
App.vue
Vue的组件文件以.vue结尾,每个组件由三个部分组成:<template>,<script>,<style>