首页 > 其他分享 >[Vue]脚手架创建项目

[Vue]脚手架创建项目

时间:2023-12-10 15:44:39浏览次数:26  
标签:npm Vue 项目 创建 js vue 脚手架

文档:https://cli.vuejs.org/zh/

(脚手架最新版本是4.x)

 

1. 如果安装速度过慢,可以指到国内安装地址:
npm config set registry https://registry.npm.taobao.org

2. 首次安装(全局):npm install -g @vue/cli

 

3. 切换到创建项目的目录,使用命令创建项目 vue create xxx

4. 选择使用vue的版本、包管理工具

5. 启动项目npm run serve

6. 打包项目npm run build

7. 暂停项目Ctrl+C

 

vue脚手架隐藏了所有的webpack相关的配置,如果想查看具体的webpack配置,请执行 vue inspect > output.js

 

脚手架文件结构

├── 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: 包版本控制文件

 

标签:npm,Vue,项目,创建,js,vue,脚手架
From: https://www.cnblogs.com/ximu1009/p/17784496.html

相关文章

  • 没有配置ssh密钥的情况下,对linux批量创建账号、修改密码
    在客户端安装sshpass,利用sshpass进行登陆操作;安全考虑,操作完把明文的账号密码yjk.txt删除掉;--创建用户[root@zhu~]#catcreate_user.sh#!/bin/bashforiin$(cat/root/yjk.txt)doecho$iipaddr=`echo$i|awk-F'|''{print$1}'`passwd=`echo$i|awk-......
  • Vue 3 使用moment设置显示时间格式
    一.问题:Vue3如何使用moment设置显示时间格式。二.分析问题:在Vue3中,因为过滤器(filter)已经被废弃,取而代之的是全局方法(globalmethod)。slot-scope也被弃用使用v-slot代替。无法使用过滤器设置显示时间格式。三. 解决问题。  (1)在vueui安装moment依赖,搜索安装即可。......
  • vue3学习之createApp(App).mount('#app')
    装了vue-cli之后,新建个项目跑起来了,碰上个没理解的问题,不知道createApp(App).mount('#app')挂载的这个id=“app”从哪冒出来的 用命令创建出来的项目,components/HelloWorld.vue,App.vue,main.js中都没有估摸着得是底层的,网上找一圈,各路大神基本是一句带过,可能是太简单了,没......
  • 使用Vue和Element UI进行文件上传的简单教程
    当使用Vue和ElementUI进行文件上传时,你可以按照以下步骤进行操作:步骤1:安装Vue和ElementUI在你的Vue项目中使用npm或者yarn安装Vue和ElementUI:npminstallvueelement-ui步骤2:创建上传组件创建一个Vue组件来处理文件上传的逻辑。在组件的<template>中添加一个文件上传的按钮和......
  • 【前端框架Vue】Vue是什么?怎么用?
    Vue是JS的一种框架,用于构建用户界面的JS框架。可以理解为,Vue通过指令和模板语法,将数据和HTML模板关联起来,实现一种响应式的数据驱动视图的方式Vue是什么?Vue是JS的一种框架,用于构建用户界面的JS框架。可以理解为,Vue通过指令和模板语法,将数据和HTML模板关联起来,实现一种响应式的......
  • Vue源码学习(十八):实现组件注册(一)Vue.component()和Vue.extend()
    好家伙, 0.完整代码已开源https://github.com/Fattiger4399/analytic-vue.git 1.思路1.1.什么是组件化? Vue组件化是指将复杂的应用程序拆分成多个独立的、可复用的组件,这些组件可以实现特定的功能或局部功能。组件化有助于提高开发效率、方便重复使用、简化调试步骤......
  • Vue学习之node.js环境下利用Vue-cli脚手架搭建Vue项目
    目录第一个Vue-cli应用什么是vue-cli?vue-cli主要功能:搭建需要的环境1、nvm-windows下载2、安装nvm3、修改nvm环境变量4、通过nvm安装node5、安装全局npm6、一些替代npm的方式安装vue-cli第一个脚手项目配置命令行运行Vue项目IDEA运行Vue项目第一个Vue-cli应用之前练习了Vue一些......
  • Vue学习之Vue的计算属性与Vue内容分发
    vue计算属性vue计算属性的重点突出在属性两个字上(属性是名词),首先它是个属性其次这个属性有计算的能力(计算是动词),这里的计算就是个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已<!DOCTYPEhtml><html><head><metacharset="U......
  • Vue学习之参数传递与事件分发使用this.$emit(‘自定义事件名‘, 参数)自定义事件删除
    ......
  • Vue学习之Vue结合 ElementUI 组件库搭建Web工程项目
    创建Vue项目打开cmd命令行界面,创建一个全新的vue项目,我们命名为hello-vue,这里附上ElementUI网址如下:ElementUI#使用webpack打包工具初始化一个名为hello-vue的工程vueinitwebpackhello-vueNPM安装相关组件依赖时可能会遇到权限问题,此时使用PowerShell管理员模式运行即......