一、vue的简介
1、什么是vue
官网地址:Vue.js
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。
-
构建用户界面:之前在学习vue之前通过原生js对DOM操作进行构建用户界面的
使用原生js构建用户界面的不足 - 没有规范,统一性不强,不利于团结写作开发 - 大量的DOM操作,开发效率很低 - 没有性能优化
-
渐进式:
声明式渲染+组件系统
(vue的核心)+客户端路由+状态机+工具链等部分组成
渐进式:你可以在自己的项目只使用vue的一部分内容,不需要全部使用,这个vue不强制 随着项目的变大,大家可以将页面中公共部分封装成组件,然后调用组件,这样可以提高开发效率 在随着项目的变大,需要客户端路由+状态机
-
框架:框架是应用程序的半成品,框架内已经将公共的部分完成了,程序使用框架的好处
-
快速的提高开发效率
-
程序员不用关注非核心内容,只关注业务本身
-
框架规范行为,让代码统一性变得更强
-
2、特点
优点
-
声明式编程,不需要程序员编写大量的DOM就能够完成页面的构建
-
使用组件模式,可以让代码进行复用,增强代码的可维护性
-
采用虚拟DOM+diff,使得按需更新,不需要构建全部DOM操作
-
vue是一个轻量级的一个框架,相对与其他框架更好容易上手
缺点
-
首屏加载速度慢
-
VUE的网站不利于SEO优化
3、vue的作者
尤雨溪(Evan You),前端框架 Vue.js 作者,独立开源开发者,现居美国新泽西。曾就职于 Google Creative Labs 和 Meteor Development Group。由于工作中大量接触开源的 Java 项目,最后自己也走上了开源之路,现在全职开发和维护 Vue.js。
4、vue版本情况
-
2013年Evan You收到了Anglur启发,开发出来了Seed,后来在同年12月份,将Seed改名为vue,当时的版本是0.6.0
-
2014年正式对外开放,版本是0.8.0
-
2015年12月份,vue1.0版本出现
-
2016年12月1日,vue2.0版本
-
2020年9月18日,vue3.0版本出现
二、vue环境的搭建
vue环境的搭建有两种方式,第1种方式:使用script标签的方式引入到网页上,这种方式比较使用学习使用,不太使用实际开发,第2种方式:使用vuecli脚手架方式来进行项目搭建,这种方式比较适合实际企业开发用
1、使用script方式引入
具体的实现步骤有如下
-
在html页面中通过script标签的方式引入vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
-
在body标签之间定义一个div元素,用来作为vue内容渲染的容器
<div id="app"></div>
-
创建vue实例
<script>
/*
通过new的方式调用构造函数来进行创建vue实例
Vue的构造函数的参数是一个对象,该对象中的属性
就是vue的选项,这里边的选项都是固定的
el:vue挂载目标,这里的值是目标挂载点的选择器
data:可以是一个对象,也可以是一函数
对象的属性是自定义的
*/
const vm=new Vue({
el:'#app',
data:{
message:'Hello Vue!~'
}
})
</script>
data选项的后面也可以是一个函数
/*
通过new的方式调用构造函数来进行创建vue实例
Vue的构造函数的参数是一个对象,该对象中的属性
就是vue的选项,这里边的选项都是固定的
el:vue挂载目标,这里的值是目标挂载点的选择器
data:可以是一个对象,也可以是一函数
对象的属性是自定义的
*/
const vm=new Vue({
el:'#app',
data:function(){
return{
message:'Hello Vue!!!!!!!'
}
}
})
-
在HTML页面中渲染vue实例的data数据
如果要渲染vue中的data数据的方式很多,但是最常见的是一个插值表达式(双花括号)
<div id="app">
{{message}}
</div>
2、使用vue/cli命令行工具安装
-
首先安装vue/cli
npm i -g @vue/cli
-
创建vue项目
vue create 项目名称
-
手动安装
Vue CLI v5.0.8
? Please pick a preset:
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
> Manually select features
-
安装相关依赖包
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
>(*) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
-
选择vue的版本
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with
3.x
> 2.x
-
选择css预处理语言
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
Less
Stylus
-
选择配置文件
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
-
是否保存预设
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N
-
启动项目
npm run serve
-
运行项目
3、vue/cli图形界面方式
步骤如下
-
在终端上输入如下命令打开图形界面方式
vue ui
三、目录结构
1、目录结构的分析
project
|- node_modules:第三方依赖包
|- public:存放静态资源的,这里的静态资源不会被webpack编译
|-favicon.ico:icon图标
|-index.html:项目index.html文件
|- src:源代码
|-assets:静态资源,会被webpack所编译
|-components:自定义组件
|-App.vue:项目的根组件
|-main.js:vue项目的入口文件
|-.gitignore:git上传的忽略文件
|-babel.config.js:babel的配置文件
|-jsconfig.js:js的配置文件
|-package.json:项目配置文件
|-vue.config.js:在文件中可以对webpack的配置进行修改
2、vue项目运行流程
项目启动后,首先运行的是main.js
//导入vue第三依赖包
import Vue from 'vue'
//导入根组件
import App from './App.vue'
//关闭生成提示
Vue.config.productionTip = false
//创建vue实例
//vue的选项
//render:vue2的渲染函数
new Vue({
el:'#app',
render: h => h(App),
})
注意点:vue2中设置目标挂载点有两种方式
new Vue({
el:'#app',
render: h => h(App),
})
还有一种方式
new Vue({
render: h => h(App),
}).$mount('#app')
3、单文件组件
凡是以后缀.vue结尾的都成称为单文件组件,单文件组件有三个部分组成
-
template:该标签之间存放的HTML代码,用来定义结构的
-
script:编写的js代码
-
style:编写的css代码
<template>
<h1>Hello <span>{{name}}</span></h1>
</template>
<script>
export default{
data:function(){
return{
name:'Giles'
}
}
}
</script>
<style lang="scss">
h1{
span{
color:red
}
}
</style>
如上代码,如果要向让其有高亮显示和智能提示需要安装vetur插件
四、打包与部署
开发完的vue项目都必须打包并部署到服务器上
部署vue到nginx服务器上的步骤
-
在vue.config.js文件中需要配置部署路径,具体配置如下
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
publicPath:'./'
})
-
在终端上进行打包,具体打包的命令如下
npm run build
-
将生成dist目录进行重命名,并且上传到到外网服务器(阿里云)
这里我将目录上传到/opt目录下
-
在/etc/nginx/config.d/default.confi下的server节点下进行如下配置
location /first {
alias /opt/first;
index index.html;
}
-
执行如下命令
ps aux|grep nginx
killall -9 nginx
-
重新启动nginx服务器
/usr/sbin/nginx
五、vue.config.js的配置
如果要进行webpack的配置可以在vue.config.js中进行
const { defineConfig } = require('@vue/cli-service')
module.exports =defineConfig({
//部署应用包时的基本 URL
publicPath:'./',
//更改打包后的输出目录名称
outputDir:'build',
//设置放静态资源的目录
assetsDir:'static',
//指定生成的index.html的输出路径
indexPath:'home.html',
//设置devServer的选项
devServer:{
//自动打开页面
open:true,
host:'127.0.0.1',
port:'8888'
}
})
六、插值表达式
1、什么叫插值表达式
vue中的内容如果要动态的渲染到页面之上,可以在<template>
部分使用插值表达式动态渲染vue中data选项的数据
2、插值表达式语法
{{插值表达式}}
插值表达内容如下
-
常量
-
变量文章来源:https://www.toymoban.com/news/detail-683765.html
-
表达式(运算符+操作数)文章来源地址https://www.toymoban.com/news/detail-683765.html
<template>
<!--在vue2template模板中的根元素只能是一个,不能是多个-->
<div>
<div>姓名:{{name}}</div>
<div>年龄:{{38}}</div>
<div>性别:{{gender==1?'男':'女'}}</div>
<div>爱好:{{hobby.slice(0,1)}}</div>
<div>求和:{{nums.reduce((prev,cur)=>prev+cur,0)}}</div>
</div>
</template>
<script>
export default {
data(){
return{
name:'Giles',
gender:1,
hobby:['basketball','football','apple'],
nums:[10,20,30,59,89,67]
}
}
}
</script>
<style>
</style>
到了这里,关于VUE笔记(一)初识vue的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!