一、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、插值表达式语法
{{插值表达式}}插值表达内容如下
-
常量
-
变量
-
表达式(运算符+操作数)
<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>
