Git、创建项目

最新推荐文章于 2023-06-07 18:49:53 发布

weixin_jerr

最新推荐文章于 2023-06-07 18:49:53 发布

阅读量84

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_jerr/article/details/111271118

版权

本文介绍了如何使用Git进行项目创建，包括配置文件名和邮箱、安装Vue CLI以及创建项目。接着讲解了如何集成Element UI并展示了一些基本组件的效果。此外，还提到了Vue代码块的编写注意事项，如何引用Bootstrap，以及安装和封装Vue Router进行子级路由管理。

摘要由CSDN通过智能技术生成

一、创建项目

1.安装Git
2.创建文件名及邮箱地址
git config --global uesr.name “文件名”
git config --global user.email 邮箱
3.安装vue脚手架
npm install -g @vue/cli
4.创建项目
vue ui
在页面中创建项目
5.安装element ui组件
vue add element
安装成功后会显示
在这里插入图片描述

二、element ui 几个效果

1.基础按钮

<el-radio v-model="radio" :label="1">备选项</el-radio>
    <el-radio v-model="radio" :label="2">备选项</el-radio>

效果：
在这里插入图片描述
2.单选框组

    <el-radio-group v-model="radio1">
      <el-radio :label="3">3</el-radio>
      <el-radio :label="6">6</el-radio>
      <el-radio :label="9">9</el-radio>
    </el-radio-group>

效果：
在这里插入图片描述
3.注意事项：
如果lable前面加了冒号则数据类型为number
如果没有冒号则为string

三、vue编写代码块

在这里插入图片描述

	"create a new html":{
		"scope": "",
		"prefix": "eradio",           //触发代码片段的快捷代码
		"body": [
			"<el-radio v-model=\"radio\" :label=\"1\" @change=\"change\">$1</el-radio>"
		],                           //生成的代码片段
		"description": "禁用按钮"    //提示
	},
	"create a new html1":{
		"scope": "",
		"prefix": "exuan",
		"body": [
			"<el-radio disabled v-model=\"radio\" :label=\"2\" @change=\"change\">$1</el-radio>"
		],
		"description": "禁用按钮"
	},

注意事项：
1 代码片段中有特殊字符需要转义。比如"content",需要转换为"content"；
2 需要缩进需要在代码前加空格或者\t;
3 $1、$2表示tab键停留的位置

四、如何引用bootstrap

在线引入：
在这里插入图片描述

五、下载路由组件

npm install vue-router --save

六、封装路由

let routes=[
    {
        path:"/",
        name:"layout",
        component:()=>import("../../views/layout.vue"),
        children:[
            {
                path:"/index",
                name:"index",
                component:()=>import("../../views/index/index.vue")
            }
        ]
    },
    {
        path:"/login",
        name:"login",
        component:()=>import("../../views/login/index.vue")
    },
    {
        path:"*",
        redirect:{name:"index"}
    }
]

export default routes

显示子级路由用children