首页 > 其他分享 >Vue脚手架1

Vue脚手架1

时间:2023-05-22 12:55:11浏览次数:42  
标签:npm Vue cli js vue 脚手架

## 1.1 说明

1. Vue 脚手架是 Vue 官方提供的标准化开发工具(开发平台)。 2. 最新的版本是 4.x。 3. 文档: https://cli.vuejs.org/zh/  

1.2 具体步骤

第一步(仅第一次执行):全局安装@vue/cli。 npm install -g @vue/cli 第二步:切换到你要创建项目的目录,然后使用命令创建项目 vue create xxxx 第三步:启动项目 npm run serve 备注: 1. 如出现下载缓慢请配置 npm 淘宝镜像:npm config set registry https://registry.npm.taobao.org 2. Vue 脚手架隐藏了所有 webpack 相关的配置,若想查看具体的 webpakc 配置 请执行:vue inspect > output.js  

1.3 模板项目的结构

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json:包版本控制文件
 

关于不同版本的Vue

  1. vue.js与vue.runtime.xxx.js的区别:
    1. vue.js是完整版的Vue,包含:核心功能 + 模板解析器。
    2. vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;没有模板解析器。
  2. 因为vue.runtime.xxx.js没有模板解析器,所以不能使用template这个配置项,需要使用render函数接收到的createElement函数去指定具体内容。

vue.config.js配置文件

  1. 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
  2. 使用vue.config.js可以对脚手架进行个性化定制,详情见:https://cli.vuejs.org/zh
 

标签:npm,Vue,cli,js,vue,脚手架
From: https://www.cnblogs.com/yangtaiqi/p/17420341.html

相关文章

  • Vue购物车实例练习
    功能介绍金额=单价*数量金额会自动根据数量的变化进行变化,我们可以点击按钮增加或减少商品的数量。合计金额:只有在序号列号勾选上才会被计入总金额中,金额总数会根据用户的操作自动更新数据。删除:如图我们勾选了第2个商品,当我们点击删除时,只会删除被选中的产品。全选:点击......
  • VUE npm run serve 提示error Mixed spaces and tabs no-mixed-spaces-and-tabs 解决
    解析:看这个错误提示意思就是“不允许代码中出现空格和tab键混合的情况”大多数代码约定要求使用空格或tab进行缩进,禁止使用空格和tab混合缩进。因此,一行代码同时混有tab缩进和空格缩进,通常是错误的。解决办法:原因找到了,解决办法就是找到spaces和tabs混合的地方,然后统一即可!......
  • vue项目结合vant,实现上拉加载更多,下拉刷新
    上拉加载思路:引入vant组件上拉list后端数据做了分页处理,获取接口数据,渲染到页面上,(此处只会显示一页的数据)设置属性去实现效果,loading,finished为vant组件中提供的每次滚动到底部后把页面数+1,发送一次请求获取新分页数据.获取完数据,将新获取的数据跟上一页获取的数据做......
  • java基于的springboot+vue4S店车辆管理系统,车辆销售管理系统,附源码+数据库+lw文档+PPT
    1、项目介绍首先介绍了4S店车辆管理的技术发展背景与发展现状,然后遵循软件常规开发流程,首先针对系统选取适用的语言和开发平台,根据需求分析制定模块并设计数据库结构,再根据系统总体功能模块的设计绘制系统的功能模块图,流程图以及E-R图。然后,设计框架并根据设计的框架编写代码以实......
  • vue实现卡片滚动效果
    vue实现卡片滚动左右切换效果HTML://最外层盒子<divclass="box_1"> //内层盒子 <divclass="box_2" :style="{transform:'translateX'+'('+currentOffset+'px'+')',}"> //中间放需要展示的div,样式......
  • java基于springboot+vue的土特产在线销售平台、特产在线销售商城,附源码+数据库+lw文档
    1、项目介绍考虑到实际生活中在藏区特产销售管理方面的需要以及对该系统认真的分析,将系统权限按管理员和用户这两类涉及用户划分。(1)管理员功能需求管理员登陆后,主要模块包括首页、个人中心、用户管理、特产信息管理、特产分类管理、特产分类管理、特产评分管理、系统管理、订单......
  • Vue进阶(九十八):Vue.set() 和 this.$set()
    (文章目录)一、应用场景有时候我们会看到如下代码:在我们使用vue进行开发的过程中,可能会遇到这样一种情况:当创建vue实例后,再次给对象赋值时,发现数据并不会自动更新到视图上去;当我们去阅读vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图......
  • vue中输入密码带图标可见不可见切换
    data(){return{userName:"",pswd:"",loginDisabled:false,labelPosition:"top",passwordType:'password',passwordIcon:require('@m/assets/images/bukejian.png')......
  • Ubuntu桌面下Vue开发环境搭建
    Ubuntu桌面下Vue开发环境搭建node环境node安装node官网下载node安装包:node-v18.16.0-linux-x64.tar.xz#解压sudotar-xvJfnode-v18.16.0-linux-x64.tar.xz-C/usr/local/cd/usr/local/sudomvnode-v18.16.0-linux-x64/nodejs#配置环境变量cd/etc/profile.d/......
  • vue3 +leaflet + 天地图
    vue3使用leafletnpminstallleaflet-D如果使用了tsnpmi--save-dev@types/leaflet//使用了ts需要下载声明类型//更具需要获取不通过类型的urlfunctiongetUrl(type:string){interfaceMyObject{[key:string]:Array<string>;}letobj:MyObject=......