vue基础知识(定义/特点/使用流程)

最新推荐文章于 2024-01-25 10:17:57 发布

乖女子@@@

最新推荐文章于 2024-01-25 10:17:57 发布

阅读量460

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/qq_43260366/article/details/115099829

版权

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;
- 优点：
  - 一次定义，多次使用；
  - 便于维护；

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

乖女子@@@

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vue基础知识(定义/特点/使用流程)

1.定义1.Vue是什么：Vue是一个用于构建用户界面的渐进式javascript框架；框架：被人写好的css/js文件；布局框架：别人写好的css文件； js框架，别人写好的js文件；渐进式类似nodejs的模块化；也就是说当我们调用某个组件时不需要将全部的uve导入优点：最大程度的避免了资源浪费；、构建用户界面将数据渲染到页面上 2.特点1.数据驱动视图无需dom操作，就可以将数据渲染到页面上，并且修改了vue中的数据，视图上的数据会自动修
复制链接

扫一扫