新手小白VUE整理(4) ——vue-cli

crazy程序猿丶

已于 2022-10-31 14:01:17 修改

阅读量97

点赞数

分类专栏：新手小白初识vue 文章标签： vue.js

于 2022-10-31 12:01:42 首次发布

本文链接：https://blog.csdn.net/a35336000/article/details/127607726

版权

新手小白初识vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

VUE 2.X

1.什么是vue-cli

vue-cli是Vue.js开发的标准工具.它简化了程序猿基于webpack创建工程化Vue项目的过程.

2.安装和使用

vue-cli是npm上的一个全局包,使用npm install命令,即可方便的把它安装到自己的电脑上:
npm i -g @vue/cli
基于vue-cli快速生成工程化的Vue项目:
vue create 项目的名称

3.安装步骤示例

选择一个文件夹,打开终端,输入vue create demo-first
进入vue项目安装选择界面
刚开始创建vue-cli,选择Manually select features,按下enter
根据需要,暂时只选择Babel和Css Pre-processors,按下enter
选择vue版本,根据需要选择2.x或者3.x,这里选择2.x,按下enter
选择Css Pre-processors插件,这里根据需要只选择Less,按下enter
选择Babel,EsLint等插件的配置文件存放位置,这里选择In dedicated config files(插件的配置文件,放在各自独立的文件中),按下enter
等待自动生成项目
运行项目

4.vue项目中src目录构成:

assets文件夹:存放项目中用到的静态资源,比如:css样式表,图片资源等
components文件夹:程序猿封装的,可复用的组件,都要放到components文件夹中
main.js:是项目的入口文件,整个项目的运行,要先执行main.js,相当于webpack项目中的index.js
App.vue:项目的根组件,是vue项目的首加载组件,页面的入口文件,所有页面都是在App.vue下进行切换的；也是整个项目的关键,app.vue负责构建定义及页面组件归集。

5.vue项目的运行流程

在工程化的项目中,vue要做的事情很单纯:通过main.js把App.vue渲染到index.html指定的区域中,其中:

App.vue用来编写待渲染的模板结构
index.html中需要预留一个el区域
main.js把App.vue渲染到了index.html所预留的区域中

6.vue组件

1)什么是组件化开发?

组件化开发是指:根据封装的思想,把页面上可重用的UI结构封装为组件,从而方便项目的维护和开发

2)vue中的组件化开发

vue是一个支持组件化开发的前端框架
vue中规定:组件的后缀名是.vue,之前接触到的App.vue文件本质上就是一个vue组件
3).vue文件三个组成部分
每个.vue组件都有3部分构成,分别是:
template:组件的模板
script:组件的js行为
style:组件的样式

其中:script写法,默认导出,固定写法.
export default {
	data(){
		// 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
		return {
			username:''
		}
	},
	methods:{
		changeName(){
		    // 组件中的this指当前组件实例,VueComponent
			console.log(this)
		}
	}
}

3)组件中启用less语法

给stye标签添加lang='less’属性

<style lang='less'>
	
</style>

7.关于render函数

主要作用:将.vue组件渲染成真实的DOM元素呈现到页面上
render函数基本了解:

通过vue-cli生成的render函数如下:
new Vue({
// 这里是使用箭头函数的简写形式
  render: h => h(App),
  // 全写形式
  render:function(createElement){
  // 这里的参数可以是:String(组件名)或者Object(组件对象,比如上面App)
  	return createElement(参数)
 }
}).$mount('#app')

更深入了解,可参考官网,可参考:https://cn.vuejs.org/guide/extras/rendering-mechanism.html或https://blog.csdn.net/weixin_45844049/article/details/114277643

8.关于$mount和el

vue中$mount和el作用完全相同,都是用表明vue实例将挂载到哪个html标签上面,大致区别是$mount是vue实例方法,el则是构造函数属性配置项
用法:
new Vue({}).$mount("#app").
new Vue({
	el:"#app"
})
不过对比而言,$mount会更加灵活点,如果所挂载区域是动态生成的,显然,此时只能用$mount.比如这样一段代码:
<script>
 let div =  document.createElement("div")
 div.id = 'test';
 div.innerText = '我是动态生成html, {{ username }}'
 document.getElementsByTagName("body")[0].append(div);
 new Vue({
  data:{
    username:'zs'
  }
 }).$mount("#test");
</script>