Vue—前端工程化

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

  1. assets            静态资源
  2. components  可重用的组件
  3. router             路由配置
  4. views             视图组件(页面)
  5. App.vue         入口页面(根组件)
  6. main.js           入口js文件

Vue项目启动

图形化界面下运行NPM脚本

Vue项目-配置端口​​​​

在vue.config.js文件下


Vue项目的开发流程 

首先通过入口文件 main.js 进入默认首页 Index.html

通过import 导入组件或模块 类似Java导包操作

App.vue

Vue的组件文件以.vue结尾,每个组件由三个部分组成:<template>,<script>,<style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值