Vue基础-01-框架和库的概念

前端小萝莉

已于 2022-07-04 15:59:44 修改

阅读量113

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-07-04 15:53:42 首次发布

本文链接：https://blog.csdn.net/xx661660/article/details/125601907

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Vue基础-01-框架和库的概念

基本概念

库：jquery，其实就是某些方法的一个集合，只是将一些核心的代码封装起来，你在调用过程中，按照以前逻辑直接用函数的形式来完成开发。extjs（政府项目、医疗项目）easyui这个库

框架：框架是一套完整的项目解决方案，提供了每个环节的开发内容。很多的业务不需要你自己去设计，你只需要按照框架约定的规范来写代码就可以实现效果。开发效率提高，性能优化。

Vuejs：框架，有一套完整的代码解决方案，项目解决方案

搭建Vue环境

自定义引入

Vue可以在你们html代码中直接引入使用。适合于目前你的项目已经开发完成，用vue来重构。

使用命令初始化项目
1. npm init -y
你的项目初始化完成后，需要有pakage.json文件，你才能npm下载你需要的包
下载需要Vue包
1. npm install vue@2.6.10
目前单独下载vue包如果不指定版本，默认就是3.x版本
在项目中引入Vue
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
7. <title>Document</title>
8. <script src="../node_modules/vue/dist/vue.js"></script>
9. </head>
10. <body>
11. <div id="app">
12. {{msg}}
13. <p>
14. {msg}
15. </p>
16. </div>
17. <div></div>
18. <script>
19. const app = new Vue({
20. // element 元素
21. el:"#app",
22. data:{
23. msg:"小王"
24. }
25. })
26. </script>
27. </body>
28. </html>
new Vue创建一个Vue实例。{el}创建实例的时候，初始化你的参数

el：vue加载完毕后要挂载到页面哪个节点。

data：当前这个页面中能使用的数据

以后你们通过ajax发送数据前端获取，赋值给data

安装脚手架

Vue还提供的脚手架的方式来搭建项目。创建Vue工程化。类似于webpack搭建的前端工程化，包含完整的流程，工具链等等。

一个完整的项目你在开发过程中会用到很多第三方的依赖包。都需要进行管理

一个完成的项目开发过程中会用到很多的工具：打包css、打包js、打包字体、语法检测、压缩混淆

Vue已经开发了一套自己的脚手架工具。按照脚手架创建项目，就能得到一个完成Vue前端工程。

Vue脚手架底层就是webpack

Vue Cli：

卸载本地的脚手架

npm uninstall vue-cli -g

安装新的脚手架

npm install vue-cli -g

安装成功后，查看版本

vue --version

创建项目

创建vue项目
1. vue create my-project
my-project这个名字是项目名字，你可以自己定义，项目名字不要大写
选择项目的安装方式
1. ? Please pick a preset:
2. Default ([Vue 2] babel, eslint)
3. Default (Vue 3 Preview) ([Vue 3] babel, eslint)
4. ❯ Manually select features
Default ([Vue 2] babel, eslint) :创建项目的时候选择vue2.x版本，创建一个默认项目。后续啥都不用选

Default (Vue 3 Preview) ([Vue 3] babel, eslint) ：选择vue的版本，创建一个默认项目，后续啥都不用选

Manually select features ：自定义项目的工具包，你可以自己选择加载哪些内容

默认请选择第三个选择
选择项目中需要的插件
1. ? Check the features needed for your project:
2. ◯ Choose Vue version
3. ❯◉ Babel
4. ◯ TypeScript
5. ◯ Progressive Web App (PWA) Support
6. ◯ Router
7. ◯ Vuex
8. ◯ CSS Pre-processors
9. ◯ Linter / Formatter
10. ◯ Unit Testing
11. ◯ E2E Testing
这一步创建项目的时候，你可以让脚手架默认给你下载对应一些插件

默认选择：Choose Vue version、 Babel、CSS Pre-processors
你所选的插件，默认的配置文件如何保存
1. ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
2. ❯ In dedicated config files
3. In package.json
In dedicated config files :配置默认分离开，每个插件都有一个自己的配置

In package.json ：所有插件配置统一放在pakage.json中
是否保存我们当前所选配置
1. ? Save this as a preset for future projects? (y/N)
这一步是在提示你们是否要保存当前所有操作步骤，选择Y，自己填写一个名字，下次就不用在选这些插件
启动项目
1. cd 项目
2. npm run serve

前端小萝莉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础-01-框架和库的概念

库：jquery，其实就是某些方法的一个集合，只是将一些核心的代码封装起来，你在调用过程中，按照以前逻辑直接用函数的形式来完成开发。extjs（政府项目、医疗项目）easyui这个库框架：框架是一套完整的项目解决方案，提供了每个环节的开发内容。很多的业务不需要你自己去设计，你只需要按照框架约定的规范来写代码就可以实现效果。开发效率提高，性能优化。Vuejs：框架，有一套完整的代码解决方案，项目解决方案自定义引入Vue可以在你们html代码中直接引入使用。适合于目前你的项目已经开发完成，用vue来重构。使用命
复制链接

扫一扫