0
点赞
收藏
分享

微信扫一扫

【Vue系列】Vue-cli(Vue脚手架)详细教程

幺幺零 2022-11-03 阅读 133
vue.js前端

1. 创建Vue脚手架

1.1 首先系统需要全局安装Vue脚手架

npm install -g @vue/cli

1.2 创建Vue脚手架工程

进入你想创建vue脚手架的目录,然后输入命令

vue create xxx项目名

需要注意的是工程名字不能大写,这里我们选择选择Vue2,敲下回车,那么vue将会为我们创建vue脚手架

 显示如图所示说明创建成功

如图命令所示 我们进入myvue工程,执行命令
npm run serve
然后浏览器访问http://localhost:8080/

 到这里 我们的vue脚手架工程就跑起来了,关闭为Ctrl+C

2. Vue脚手架的文件结构说明

├── 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:包版本控制文件
├── vue.config.js: 是一个可选的配置文件

3. 修改默认配置

Vue-cli官网配置参考:https://cli.vuejs.org/zh/config/#publicpath

在工程根目录下创建文件vue.config.js

 这里我们演示配置一下语法检查

3.1 配置前

会发现,默认语法检查是开启的,然后我们写了一个function没有被使用的话就会导致整个项目启动不了,所以在实际开发中,会带来很多障碍,所以我们将它关闭。

3.2 配置后

在vue.config.js中,加入以下代码

4. render函数

在入口文件main.js中,render函数

为什么用render,而不用template ``语法?

因为考虑到引用的是残缺版的vue,无法解析template配置项的vue

	关于不同版本的Vue:
	
		1.vue.js与vue.runtime.xxx.js的区别:
				(1).vue.js是完整版的Vue,包含:核心功能+模板解析器。
				(2).vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;没有模板解析器。

		2.因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用
			render函数接收到的createElement函数去指定具体内容。

所以借助render,render内部做了什么:

举个例子:

render(createElement){
    return createElement('h1','你好啊')
}

//或者这种写法
render: q=>q('h1','你好啊')

5. 标签中的ref属性

5.1 ref属性的作用

作用就相当于给一个表情加了个id=“xxx” 然后通过document.getElementById(“xxx”)的效果一样。

5.2 示范

编写一个School.vue组件,然后在App.vue中引入

 我们访问网页 会发现,拿得到Dom元素,测试成功!

 

6. props配置 

6.1 功能

让组件接收外部传递过来的数据,从而达到组件复用的目的
(1).传递数据

<Demo name="xxx"/>

(2).接收数据

第一种方式(只接收):

props:['name']

         会发现以上会出现一个问题,如果我们需要传递18而显示19的话,那就需要做一下调整,因为默认传递过去的是一个字符串类型的数据,所以会造成字符串的拼接,所以我们得在传递的属性上面加 : 或者 v-bind ,他就会将表达式中的值正真的传递过去而不是以字符串的形式。

第二种方式(限制类型): 

props{
	name:String
}

 会发现传递字符串的话就会报错,一样通过:或者v-bind解决

 第三种方式(限制类型、限制必要性、指定默认值)

props:{
	name:{
    	   type:String, //类型
    	   required:true, //是否必传
    	   default:'老王'//默认值
    }
}

总结:

举报

相关推荐

0 条评论