1.定义
1.Vue是什么:Vue是一个用于构建用户界面的渐进式javascript框架;
- 框架:被人写好的css/js文件;
- 布局框架:别人写好的css文件;
- js框架,别人写好的js文件;
- 渐进式
- 类似nodejs的模块化;
- 也就是说当我们调用某个组件时不需要将全部的vue导入
- 优点:最大程度的避免了资源浪费;、
- 构建用户界面
- 将数据渲染到页面上
2.特点
- 1.数据驱动视图
- 无需dom操作,就可以将数据渲染到页面上,并且修改了vue中的数据,视图上的数据会自动修改;
- 2.组件化开发
- 网页中的某一个部分,可能需要在多个地方被重复使用,就可以定义成一个组件;
- 组件:可以把网页的某一个部分(HTML+CSS+JS)封装成一个组件;
- 类似js中的函数;
- 函数只是封装js代码;
- 组件封装的是html+css+js;
- 类似js中的函数;
- 组件:可以把网页的某一个部分(HTML+CSS+JS)封装成一个组件;
- 优点:
- 一次定义,多次使用;
- 便于维护;
- 网页中的某一个部分,可能需要在多个地方被重复使用,就可以定义成一个组件;
3.vue的使用流程
[1]在html页面中使用
<body>
<!-- 1.导包 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 2.写html结构 -->
<div id="app">{{msg}}</div>
<!-- 3.初始化vue实例 -->
<script>
// 导包之后得到全局的Vue
let vm=new Vue({
el:'#app',
data:{
msg:'啦啦啦'
}
})
</script>
</body>
[2]使用快速原型开发创建vue组件
- 过程
- 创建.vue文件,写好结构样式;
- 在集成终端打开,执行 vue serve 文件名;
- 快速原型开发的原理
-
默认情况下,浏览器只能识别
html,css,js
后缀文件,无法识别.vue
后缀文件,所以要想让浏览器识别.vue
后缀文件,我们需要借助一些插件来帮我们将.vue
文件转成浏览器可以识别的html文件 -
vue serve 使用了和 vue create 创建的项目相同的默认设置 (webpack、Babel、PostCSS 和 ESLint)。它会在当前目录自动推导入口文件——入口可以是
main.js
、index.js
、App.vue
或app.vue
中的一个。你也可以显式地指定入口文件:vue serve 入口文件.vue -
会在入口文件进行·打包,将文件打包为浏览器可以识别的html,js文件;
-
<template>
<div class="#app">{{msg}}</div>
</template>
<script>
export default {
data(){
return {
msg:'lalala'
}
}
}
</script>
[3]使用脚手架创建目录结构
注:在项目中使用;
[1]在想要创建项目的地方shift+右击
之后点击在此处打开Powershell窗口
//也可打开cmd小黑窗,cd+文件夹路径,切换到需要的路径在输入命令
[2]输入命令vue create 项目名
,([1]选择默认创建;[2]手动选择创建);
-
默认流程
-
[1] 选择默认--Default ([Vue 2] babel, eslint)
-
[2]直接就下载完成了
-
-
手动选择流程
-
[1]选择手动--- Manually select features
-
[2]选择你在项目中使用的插件:--- Check the features needed for your project:
-
(*) Choose Vue version(*) Babel( ) TypeScript( ) Progressive Web App (PWA) Support( ) Router( ) Vuex( ) CSS Pre-processors(*) Linter / Formatter( ) Unit Testing( ) E2E Testing
-
注:
*代表选中,若是想切换有没有选中---使用 空格 切换
-
-
创建项目时选择的特性有:
babel: 将高版本js转换成低版本js
Router: 在项目中使用 vue-router
Vuex:在项目中使用 Vuex
CSS Pre-processors:使用 css 预处理器
Linter:代码规范
-
[3] Use history mode for router? ---是否选择·history的路由
注:路由方式分为两种,一种是
history路由
另一种是hash路由
;------区别:history路由没有
#
;hash路由存在#;------(目前)使用hash路由----history路由需要后台进行一定的配置;
-
[4]Sass/SCSS (with dart-sass)Sass/SCSS (with node-sass)LessStylus ---选择css预处理器
----目前使用的是less
注:sass(可以不写{}不是很友好);scss是sass的升级;
stylus与scss相似;现在一般使用less或scss;
-
[5]ESLint with error prevention onlyESLint + Airbnb configESLint + Standard configESLint + Prettier
----选择eslint的版本;
---注:eslint没有标准发布的版本,(Standard 版本比较火,所以我们也使用Standard)
-
Pick additional lint features---选择什么时候进行eslint检查
---注:一般都是选择保存的时候进行eslint的检查
-
Where do you prefer placing config for Babel, ESLint, etc.?---将以上选择的插件的文件信息放在哪里
In dedicated config files In package.json ---一般选择package.json(若是选择单独创建文件夹--需要很多文件夹,不是很友好)
-
Save this as a preset for future projects? ---是否生成快捷方式
----若是选择是的话,需要起一个名字,以后可以快速创建与该配置相同的脚手架
-
等待下载完成;
-
前提:(电脑安装了脚手架插件在电脑(cmd)npm install -g @vue/cli
,可以通过vue --version
检车是否安装以及版本)
注意点:
-
项目名称不能使用中文,英文大写;
-
安装项目的时候,尽量放在非中文目录下;
-
一般最好先将文件建在桌面上(写完成之后再移动);
-
若是网络不好,卡住了--按
一次
的ctrl+c
,表示我要下载【加速】; -
两次ctrl+c
表示终止运行;
[3]运行
-
(1)生成一个目录文件
-
将文件夹放在vscode中,在
跟文件
上右击集成终端, -
-----
npm run serve
查看是否运行成功
-
-
(2)
-
cd 文件夹名---切换到文件对应路经
-
npm run serve
-