网站设计网站建设毕业文稿,口碑好的丹阳网站建设,珠海教育局系统网站,秘鲁网站后缀一、vue的简介
1、什么是vue
官网地址:Vue.js
Vue (读音 /vjuː/#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。 构建用户界面#xff1a;之前在学习vue之前通过原生js对DOM操作进行构建用户界面的
使用原生js构建用户界面的不足
- 没有规范#xff0c…一、vue的简介
1、什么是vue
官网地址:Vue.js
Vue (读音 /vjuː/类似于 view) 是一套用于构建用户界面的渐进式框架。 构建用户界面之前在学习vue之前通过原生js对DOM操作进行构建用户界面的
使用原生js构建用户界面的不足
- 没有规范统一性不强不利于团结写作开发
- 大量的DOM操作开发效率很低
- 没有性能优化 渐进式声明式渲染组件系统(vue的核心)客户端路由状态机工具链等部分组成
渐进式你可以在自己的项目只使用vue的一部分内容不需要全部使用这个vue不强制随着项目的变大大家可以将页面中公共部分封装成组件然后调用组件这样可以提高开发效率在随着项目的变大需要客户端路由状态机 框架框架是应用程序的半成品框架内已经将公共的部分完成了程序使用框架的好处 快速的提高开发效率 程序员不用关注非核心内容只关注业务本身 框架规范行为让代码统一性变得更强
2、特点
优点 声明式编程不需要程序员编写大量的DOM就能够完成页面的构建 使用组件模式可以让代码进行复用增强代码的可维护性 采用虚拟DOMdiff使得按需更新不需要构建全部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 srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script 在body标签之间定义一个div元素用来作为vue内容渲染的容器
div idapp/div 创建vue实例 script/*通过new的方式调用构造函数来进行创建vue实例Vue的构造函数的参数是一个对象该对象中的属性就是vue的选项这里边的选项都是固定的el:vue挂载目标这里的值是目标挂载点的选择器data:可以是一个对象也可以是一函数对象的属性是自定义的*/const vmnew Vue({el:#app,data:{message:Hello Vue!~}})/script
data选项的后面也可以是一个函数 /*通过new的方式调用构造函数来进行创建vue实例Vue的构造函数的参数是一个对象该对象中的属性就是vue的选项这里边的选项都是固定的el:vue挂载目标这里的值是目标挂载点的选择器data:可以是一个对象也可以是一函数对象的属性是自定义的*/const vmnew Vue({el:#app,data:function(){return{message:Hello Vue!!!!!!!}}}) 在HTML页面中渲染vue实例的data数据
如果要渲染vue中的data数据的方式很多但是最常见的是一个插值表达式双花括号 div idapp{{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 with3.x2.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)LessStylus 选择配置文件
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 filesIn 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项目的入口文件
|-.gitignoregit上传的忽略文件
|-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代码
templateh1Hello span{{name}}/span/h1
/templatescript
export default{data:function(){return{name:Giles}}
}
/scriptstyle langscssh1{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({//部署应用包时的基本 URLpublicPath:./,//更改打包后的输出目录名称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模板中的根元素只能是一个不能是多个--divdiv姓名:{{name}}/divdiv年龄:{{38}}/divdiv性别:{{gender1?男:女}}/divdiv爱好:{{hobby.slice(0,1)}}/divdiv求和:{{nums.reduce((prev,cur)prevcur,0)}}/div/div
/templatescript
export default {data(){return{name:Giles,gender:1,hobby:[basketball,football,apple],nums:[10,20,30,59,89,67]}}
}
/scriptstyle/style
