解决vue create 创建项目只有两个文件问题
更新时间：2024年02月08日 11:04:39 作者：请学习好嘛
这篇文章主要介绍了解决vue create 创建项目只有两个文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue create 创建项目只有两个文件
学习node和vue准备做大数据毕业设计，中途下载vue后使用vue create aaa 命令创建一个项目时，发现只有两个文件，我花了很多时间去查资料找博文，最终发现是和的我windows下的hadoop安装包冲突了，导致yarn命令发现异常。（本人大数据专业）
解决办法
1.删除hadoop的安装路径，删除hadoop的所有环境变量信息
2.修改C:\Users\你的电脑用户名 下的.vuerc文件，把"packageManager": "yarn"这一行数据里面的yarn替换成npm，由此解决
vue create一个项目后需要注意的问题
组件命名
error: Component name “xxx“ should always be multi-word
import Vue from 'vue'
// import App from './App.vue' 这是原来的
import Demo from './DemoVue.vue' //这是新的，但是会报错
Vue.config.productionTip = false
new Vue({
render: h => h(Demo),
}).$mount('#app')解决方法
在 package.json 中的 rules 节点添加语句
"rules": {
"vue/multi-word-component-names": 0
}重启项目即可
快捷注释失效
不好解释，看图
本应该是 “ // ”，但是变成了html注释风格
解决方法
把语言模式改为html
最好再把关联直接配置为html
快捷代码模板
在用户代码片段新建一个全局代码段
导入模板
删除初始化的内容，复制以下模板
{
"生成vue模板":{
"prefix": "vue",
"body": [
"<template>",
"\t<div>",
"",
"\t</div>",
"</template>",
"",
"<script>",
"\t// import component from './component.vue';",
"\texport default {",
"",
"\t\tname:'$4',",
"",
"\t\tcomponents: {",
"",
"\t\t},",
"",
"\t\tdata() {",
"",
"\t\t\treturn {};",
"\t\t},",
"",
"\t\tmethods: {",
"",
"\t\t},",
"",
"\t\tprops: {",
"\t\t\t//init:{ default: value }",
"\t\t},",
"",
"\t\tcomputed: {",
"",
"\t\t},",
"",
"\t\twatch: {",
"",
"\t\t\timmediate: true",
"\t\t},",
"",
"\t\tbeforeCreate() {",
"",
"\t\t}, // 生命周期 - 创建之前",
"",
"\t\tcreated() {",
"",
"\t\t}, // 生命周期 - 创建完成（可以访问当前this实例）",
"",
"\t\tbeforeMount() {",
"",
"\t\t}, // 生命周期 - 挂载之前",
"",
"\t\tmounted() {",
"",
"\t\t}, // 生命周期 - 挂载完成（可以访问DOM元素）",
"",
"\t\tbeforeUpdate() {",
"",
"\t\t}, // 生命周期 - 更新之前",
"",
"\t\tupdated() {",
"",
"\t\t}, // 生命周期 - 更新之后",
"",
"\t\tbeforeDestroy() {",
"",
"\t\t}, // 生命周期 - 销毁之前",
"",
"\t\tdestroyed() {",
"",
"\t\t}, // 生命周期 - 销毁完成",
"",
"\t\tactivated() {",
"",
"\t\t}, // 如果页面有keep-alive缓存功能，这个函数会触发",
"\t}",
"</script>",
"",
"<style lang=\"\" scoped>",
"",
"</style>"
],
"description": "生成vue模板"
}
}最好重启一下，然后在文件中输入vue即可出现模板
模板浏览
<template>
<div>
</div>
</template>
<script>
// import component from './component.vue';
export default {
name:'',
components: {
},
data() {
return {};
},
methods: {
},
props: {
//init:{ default: value }
},
computed: {
},
watch: {
immediate: true
},
beforeCreate() {
}, // 生命周期 - 创建之前
created() {
}, // 生命周期 - 创建完成（可以访问当前this实例）
beforeMount() {
}, // 生命周期 - 挂载之前
mounted() {
}, // 生命周期 - 挂载完成（可以访问DOM元素）
beforeUpdate() {
}, // 生命周期 - 更新之前
updated() {
}, // 生命周期 - 更新之后
beforeDestroy() {
}, // 生命周期 - 销毁之前
destroyed() {
}, // 生命周期 - 销毁完成
activated() {
}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="" scoped>
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在进行vue开发的时候,我们不可避免会使用到导航菜单,element方便的为我们提供了导航菜单组件,下面这篇文章主要给大家介绍了关于el-menu实现横向溢出截取的相关资料,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了vue中关于$emit和$on的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue中封装input组件的实例详解的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下2017-10-10
这篇文章主要介绍了Vue的属性、方法、生命周期的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
Ant Design moment对象和字符串之间的相互转化教程
这篇文章主要介绍了Ant Design moment对象和字符串之间的相互转化教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
今天小编就为大家分享一篇在vue项目中正确使用iconfont的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
今天小编就为大家分享一篇解决vue-cli webpack打包后加载资源的路径问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了在IDEA中安装vue插件全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了vue打包相关细节整理(小结),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
在路由时传递参数，一般有两种形式，一种是拼接在url地址中，另一种是查询参数。这篇文章主要介绍了Spring Boot/VUE中路由传递参数,需要的朋友可以参考下2018-03-03
最新评论