一、安装Vue脚手架工具(新版本)

1.1 先安装node.js环境，下一步下一步即可

管理员运行cmd，查看版本号，有的话说明安装成功

node -v

1.2 更换淘宝的镜像源

npm config set registry https://registry.npm.taobao.org

1.2 脚手架全局安装(只需要一次即可，不用反复安装)

//官网
npm install -g @vue/cli

注意第一次安装的是3.0以下的版本，要3.0以上版本的话要卸载重新安装

 npm uninstall -g vue-clinpm install -g @vue/cli

安装成功显示版本号

1.4 创建项目

1.4.1 到你想保存项目的位置创建新的项目

vue create 项目名

1.4.2 选择安装模式

按上下箭头选择自定义安装模式

1.4.3 选择安装的产品

选这三个

1.4.4 no

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K2JQp6gn-1604832711772)(C:/Users/CEO/AppData/Roaming/Typora/typora-user-images/image-20201108183636107.png)]

1.4.5 配置文件

选择在哪里保存你的，哪个都可以

是否保存配置文件，no

创建成功

1.5 访问项目

进到项目根目录，打命令

npm run serve

启动成功

访问localhost出现欢迎页面

二、第二种创建方式

输入

vue ui

会自动弹出网页界面，照第一种安装方式选择即可

Vue-3-单文件组件相关推荐

丁鹿学堂：前端进阶学习vue3最新教程之vue的单文件组件深入理解
在vue3中,template模版中的html代码,并不能直接在网页中执行,而是会在项目运行时,在浏览器中被编译为js 的函数去执行. 问题:在template模版中写html,体验很差,智能提示都不 ...
Vue.js 单文件组件
单文件组件介绍在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这 ...
vue.js单文件组件中非父子组件的传值
最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊: ...
html引用单文件组件,vue之单文件组件纯网页方式引入
上一节的vue组件开发是把组件内容统一放到了一个js文件里面里面写上模板字符串(引用组件) 这种方式还需要拼接转义写法非常丑陋 vue贴心的帮我们封装了单文件组件可以不用再模板里面拼接字符串下 ...
Vue之单文件组件和脚手架
简介主要介绍单文件组件的定义和编写方法和脚手架相关知识介绍. 单文件组件的定义是一个文件只有一个组件,使用xxx.vue文件,这个文件是vue团队定义的一种文件类型. xxx.vue文件里面可以使用 ...
Vue之单文件组件的数据传递,axios请求数据及路由router
1.传递数据例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...
Vue的单文件组件和非单文件组件
单文件组件:一个文件中只包含一个组件,后缀为.vue(常用) <template><div><p class="tit ...
vue：单文件组件模板
注意点:组件定义完如果想要被外界引入,需要使用export default对外暴露,name属性规定组件的名字,一般和文件名一致. 详细介绍请参考尚硅谷Vue2.0+Vue3.0全套教程丨vuej ...
vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
什么Vue单文件组件（SFC）?
介绍# Vue 的单文件组件 (即 *.vue 文件,英文 Single-File Component,简称 SFC) 是一种特殊的文件格式,使我们能够将一个 Vue 组件的模板.逻辑与样式封装在单个 ...

Vue-3-单文件组件