首页 > 编程学习 > vue 入门

vue 入门

发布时间:2022/8/18 2:21:39

idea、webstorm、vsCode,都可以开发吧,脚手架vue-cli项目框架一搭建,就写代码了

 

-- 关于vue需要掌握的知识点---

 

使用的开发工具是webstorm,它是默认就安装好了vuejs插件,idea要使用的话,需要安装一下该插件

 

一、快速搭建项目vue-cli 脚手架(Vue2.0)

1、Vue CLI使用前提 –Node、 Webpack

(1) 安装 nodejs并通过npm 安装 cnpm:

(2) 安装webpack(全局安装):

# 不写版本号,默认是安装最新的版本号
cnpm install webpack@3.6.0 -g   或    npm install webpack@3.6.0 -g

(3) 安装vue脚手架(vue-cli 版本是3.xx):

# 不写版本号,默认是安装最新的版本号
cnpm install @vue/cli -g        或    npm install @vue/cli -g

● 通过拉取模板就可以使用2.x版本(vue-cli2、vue-cli3任你选):

npm install -g @vue/cli-init 或 cnpm install -g @vue/cli-init

 

■ 本地安装与全局安装区别:

  • 本地安装:仅将webpack安装在当前项目的node_modules目录中,仅对当前项目有效。
  • 全局安装:将webpack安装在本机,对所有项目有效,全局安装会锁定一个webpack版本,该版本可能不适用某个项目。全局安装需要添加 -g 参数。

 

2、初始化Vue-cli2项目、Vue-cli3项目:

  • 初始化Vue-cli2项目:
vue init webpack my-project
  • 初始化Vue-cli3项目:
vue create my-project
runtime-compiler 和 runtime-only的选择:选 runtime-only

 

■ Vue-cli2项目、Vue-cli3项目区别:

仅仅只是vue-cli3会把node_modules 隐藏起来。

开发好项目,上传代码时node_modules 是不用上传上去的,只需要在readme提醒别人通过 npm install 命令即可在目录创建node_modules。

 

3、启动项目:

  • 启动项目前先打包,再启动:
# 打包命令
npm run build
  • Vue-cli2项目:
npm run dev
  • Vue-cli3项目:
npm run serve


 

9、插槽slot 在vue中看到$:代表使用但是是vue自身的属性或者是挂载到vue上的插件(比如route)的属性,目的是为了和咱自己定义的变量做一个区分 安装插件命令:npm install (若失败,可以使用cnpm install) # npm install --save 插件名# 安装路由npm install vue-router --save# 安装vuexnpm install vuex --save# 安装element-uinpm i element-ui -S# npm install# 安装axiosnpm install axios --save-dev 的话,安装到node_modules 目录中,并在devDependencies 节点下添加上依赖,-dev是在开发时需要用的,部署不需要,一般是一些打包压缩工具和一些格式转化工具四、组件1、什么是组件化Vue的组件化设计思想借鉴了Java的面向对象思想。Java认为万物皆对象,在Vue中,万物皆组件。也就是说,在实际的vue项目中,以及使用了Vue框架的项目中,Vue的对象都会以组件的形式出现,能被反复使用。要想实现组件化,需要在页面中注册组件。关于注册的方式有两种,分别是全局注册和本地注册。2、注册全局注册和本地注册区别:全局注册可以在任何Vue根实例里面使用;而本地(局部)注册只能在绑定它的父组件中使用。一般项目中只有一个Vue根实例(全局注册),其他组件都是局部注册的。全局注册:<div id="app">
<grob></grob>
</div>


<script>
// 注册
Vue.component('grob', {
template: '<h1>自定义组件!</h1>'
})
// 创建根实例Vue
new Vue({
el: '#app'
})
</script>本地(局部)组件<div id="app">
<localV></localV>
</div>


<script>
// 注册
var Child = {
template: '<h1>自定义组件!</h1>'
}

// 创建根实例
new Vue({
el: '#app',
components: {
// <localV> 将只在父模板可用
'localV': Child
}
})
</script>3、模板占位符 template(1) template 用于包裹元素,template 不会被渲染到页面上 template:每个组件文件中的根template,也就是最外层的template 只能有一个根元素,可以是div,也可以是其他元素。 即组件模板只能有一个根元素(通常是一个div)! 非根template没有限制,可以有多个。 <img src="https://pica.zhimg.com/50/v2-f631483de4ee9bb395cfdc7f1a9b9cc2_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="523" data-rawheight="431" data-default-watermark-src="https://pica.zhimg.com/50/v2-c764105a7c705439592359e7aab82b61_720w.jpg?source=1940ef5c" class="origin_image zh-lightbox-thumb" width="523" data-original="https://pic4.zhimg.com/v2-f631483de4ee9bb395cfdc7f1a9b9cc2_r.jpg?source=1940ef5c"/>template用于创建单文件组件,实际上是一种原子化的设计,可以一次定义,然后在任何地方生成dom,如果有多个子元素,就违背了这种原子设计,也就是说,一个template就只会渲染一个子组件树。vue在动态创建dom的时候,会将template中的子元素作为入口进行创建,根据这个入口,遍历以该子元素作为根节点的整个节点树,然后创建虚拟dom。如果template有多个子元素,那么vue就无法获取确切入口。(2) template作用:通过template,vue文件实现了结构的分层 html视图层、css样式层、js层举例 Home.vue 文件:<template>
<div id="home">
<el-container>
<base-header :activeIndex="activeIndex"></base-header>
<router-view class="me-container"/>
<base-footer v-show="footerShow"></base-footer>
</el-container>
</div>
</template>

<script>
import BaseFooter from '@/components/BaseFooter'
import BaseHeader from '@/views/BaseHeader'

export default {
name: 'Home',
data (){
return {
activeIndex: '/',
footerShow:true
}
},
components:{
'base-header':BaseHeader,
'base-footer':BaseFooter
},
beforeRouteEnter (to, from, next){
next(vm => {
vm.activeIndex = to.path
})
},
beforeRouteUpdate (to, from, next) {
if(to.path == '/'){
this.footerShow = true
}else{
this.footerShow = false
}
this.activeIndex = to.path
next()
}
}
</script>

<style>
.me-container{
margin: 100px auto 140px;
}
</style>4、组件的生命周期(1) 钩子函数Vue中的组件是有生命周期的。每个生命阶段会有相应的生命周期钩子函数被调用。在vue中分为8个阶段:创建前/后,载入前/后,更新前/后,销毁前/后。(2) Vue生命周期函数使用场景beforeCreate (使用频率低) * 在实例创建以前调用 * 没有实例化,数据访问不到

 
Copyright © 2010-2022 mfbz.cn 版权所有 |关于我们| 联系方式|豫ICP备15888888号