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

Vue脚手架

时间:2022-09-24 12:56:15浏览次数:66  
标签:npm node Vue cli package -- vue 脚手架

Vue脚手架

vue-cli

首先确保已安装的node和npm node -v npm -v 其次确保npm镜像地址是淘宝镜像(有梯子除外) npm config get registry 如果结果是:https://registry.npmmirror.com/,则说明是淘宝镜像,否则改成淘宝镜像命令如下: npm config set registry https://registry.npmmirror.com/

再次安装vue-cli,命令如下: npm i -g @vue/cli 查看vue-cli安装版本 vue -V

基于vue-cli创建vue3.0项目

vue create hello-world #项目名称必须是小写英文字母
Manally select features #手动选择分支
Bable   #仅选择bable
choose a version for Vue?     #3.x
where do you ?      #In dedicated config files 保存到另外文件夹中,既不保存到package.json中(package.json 内容够多了)
Save this as preset     #No   不保存为未来分支

Loading。。。。。。


cd hello-world
npm run serve


#复制网址打开浏览器即可

基于vue-cli vueUI创建项目

非常不建议使用,丢人现眼

基于Vite创建项目

基于vite,不需要安装,只要有node和npm环境即可,但是node版本要在15.0以上

npm init vue

项目目录

vue-project
--.vscode    #配置vscode,没用
--node_modules
--public
--src        #关键,程序员写的代码都在这里
----assets    #项目所需的静态文件,图片,css等
----components    #组建文件夹
----App.vue    #根组件
----main.js
--.gitignore    #git上传时,不要的文件配置
--index.html    #页面,仅包含一个#app
--package.json
--package-lock.json
--README.md
--vite        #vite配置文件

 

标签:npm,node,Vue,cli,package,--,vue,脚手架
From: https://www.cnblogs.com/qianlichanganjie/p/16725401.html

相关文章

  • 讲讲Vue diff算法
    diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。特点:比较只会在同层级进行,不会跨层级比较在di......
  • 19道高频vue面试题,顺便写一下自己的答案
    Vue路由hash模式和history模式1.hash模式早期的前端路由的实现就是基于location.hash来实现的。其实现原理很简单,location.hash的值就是URL中#后面的内容。比如下......
  • Vue父子组件生命周期触发顺序是怎样的?
    挂载阶段父beforecreated->父created->父beforemounted->子beforecreated->子created->子beforemounted->子mounted->父mounted更新阶段父beforeUpdate->子beforeUpda......
  • 说说Vue的keep-alive使用及原理。
    keep-alive是vue.js的一个内置组件,它将不活动的组件保存在内存中,而非只讲将其销毁,提供了include(缓存),exclude(不缓存)两个属性,可以有选择的保存组件语法:<keep-al......
  • VUE v-bind 数据绑定
    动态的绑定一个或多个attribute,也可以是组件的prop。缩写: : 或者 . (当使用 .prop 修饰符)期望: any(带参数)|Object(不带参数)参数: attrOrProp(可选的)......
  • Vue2项目解决-js/css文件无法引用问题
    打包:    在vue.config.js文件中  const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({  transpileDependencies:t......
  • .NET 文件系统(七)--vue3.0文件系统搭建与配置(router配置)
    不过多介绍node安装与vue-cli安装配置,自行百度1.新建vite项目npminitvite@latest选择vue,选择ts即可生成依赖:npminstall启动项目:npmrundev2.路由(router)配置......
  • Vuex 学习笔记
    组件之间共享数据的方式小范围父向子:v-bind属性绑定简写:子向父:v-on事件绑定简写@兄弟组件之间共享数据:EventBusVuex是实现组件全局状态(数据)管理的一种机制,可......
  • Vue3与Vue2的区别(面试题)
    模板指令1、v-if、v-for优先级区别3.0依然不建议写在一个元素上但是依然可以同时绑定Vue2:当在同一个元素上使用v-if时,将优先v-forVue3:v-if优先,再v-for 2、v-model......
  • Vue组件递归渲染
    父级菜单  数据格式  子组件递归(直接使用name) ......