Vue-cli脚手架搭建
视频演示地址:https://www.bilibili.com/video/BV1fCeperEzS/?vd_source=0f4eae2845bd3b24b877e4586ffda69a
1.前置条件
安装node、npm
我的node版本:v16.13.1
我的npm版本:8.1.2
2.全局安装Vue-cli
安装
npm install -g @vue/cli
查看版本
Vue -V
我的安装版本:
@vue/cli 5.0.8
3.创建项目
创建命令
vue create prjdemo(项目名称)
手动创建的选项,可以根据自己项目的需要选择,以下是一种简单项目的参考
选择手动创建
推荐的包,选择 (Vuex、Router、babel)即可,也可以根据自己的需要添加
选择vue2.x
history模式,选择no
配置放置的位置,选择使用专用配置 In dedicated config files
是否保存为预设: 选择no
选择完毕后,等待创建完成即可
4.工程简单介绍
主体文件介绍
node_module 存放npm下载的各类插件工具
public 用来放公共资源的
src 源代码文件
.browerslistrc 项目配置工具
.gitignore git配置
babel.config.js 转码器配置
package.json 项目的依赖文件
readme 项目说明文档
vue.config.js vue工程的配置文件,可以配置端口地址等
说明: package.json 中的dependencies的区别与devDependencies的区别dependencies,依赖,这些安装包都是程序所依赖的包,需要发布到生产环境的
dev即开发的意思,就是开发环境下的依赖
例如,安装 axios
npm install axios --save-dev 安装到开发
npm install axios --save 安装到生产
index.html页面
public包下的 index.html页面是整个网站页面的主页面,载体,使用#app的dom元素,挂载vue对象;
mian.js 入口文件
整个vue工程的入口文件,这里new了Vue对象,并渲染页面,后续引入全局css、或一些插件都可以在这里引入
router/index.js
路由配置文件
vue.config.js配置文件
Vue工程的配置文件,可以配置项目启动端口、打包配置、插件配置等等