前端学习之路-创建一个vue项目

每日吐槽:以工作为目的的学习就应该倒着推,任何一个岗位都可以先进去再学习,不管是培训班还是学校,知识点都有滞后性,虽然react被疯狂鼓吹但是Vue依然很抗打,学习的方法依然是百度老师的,以作记录


目录

Vue的介绍

什么是Vue

Vue的优缺点

搭建一个Vue项目

1,准备工作

2,全局安装vue

3,创建项目

4,自定义配置

5,选择vue版本

6,是否使用历史路由(history)

运行项目


Vue的介绍

什么是Vue

vue 是一种用于构建用户界面的 JavaScript 框架,主要用于开发 Web 应用程序。它是 Vue.js 框架的文件扩展名,默认包含 HTML、CSS 和 JavaScript 代码块,并使用 Vue.js 提供的语法来定义应用程序的交互式组件。

Vue的优缺点

优点

1,轻量化,体积小,运行速度快

2,组件化:Vue将UI界面分解为一个个的组件,每个组件具有自己的数据、模板和样式,组件之                     间的关系清晰,易于维护和扩展。

3,指令:Vue提供了丰富的指令,开发者可以通过v-bind、v-model、v-show、v-if等指令快速实                     现视图绑定和条件渲染等功能。

4,虚拟DOM:Vue使用虚拟DOM技术,使页面的渲染效率更高。

5,易于学习和使用:Vue具有简单明了的API,对开发者友好,易于学习和使用。

6,Vue生态:Vue拥有庞大的社区支持,社区贡献了大量的开源组件和工具,使得Vue的生态系统                         非常丰富。

7,与其它框架可组合使用:Vue可以与其它框架(如React、Angular)共存,并且能够无缝衔接使用

缺点:

单页面不利于 seo 优化,不支持 IE8 以下,首屏加载时间长。

搭建一个Vue项目

1,准备工作

win+R输入cmd,在终端中输入命令node -v 检查自己的node版本(没有下载需要先下载)

nvm安装node教程:链接地址

2,全局安装vue

在cmd中输入命令npm install -g @vue/cli(npm安装速度 慢的话可以使用yarn)

安装完成以后输入vue -v,检查安装是否成功

3,创建项目

创建一个文件夹,右键打开终端(或者把文件夹在VS code打开终端)输入命令 

vue create XXX(项目名)

4,自定义配置

上下键控制上下,回车选择

可以选择默认版本,第一个是vue2默认模板,第二个是vue3默认模板,第三个是自定义选择(我这边选择的是自定义配置 ,选择另外两个会自动安装)

回车进入选项,选择需要的配置bable,router,vuex等,根据需要配置

上下键选择,空格确认,带*号的就是选择好的

1.Babel 这个是ES6的转换器,因为ES6是质变的一代,这个插件能够帮你把代码转换成ES5以前,现在基本没啥用。
2.TypeScript 这是微软的相当于一个javascript的增强吧,这里也用不上
3. Progressive Web App (PWA) Support 这个是要做App的一个支持的插件,这个要用的可以选上
4.Rounter 这个是路由
5.Vuex 这个是用于Vue状态管理的
6.CSS Pre-processors 这个是用来优化css文件 让那些sass和less的文件可以一同被打包到最终的项目里,有webpack基础的可能有点感触
7.Linter / Formatter 这个是用来检查代码规范的
8.Unit Testing 单元测试 有软件测试基础的同学可能会用到 其他大概率也用不上
9.E2E Testing 端到端测试 和上面一样 不搞测试的同学都用不上

5,选择vue版本

选择 vue版本

6,是否使用历史路由(history)

是否使用history创建路由

根据需求选择回车就可以生成项目了

运行项目

安装完成以后根据命令提示进入项目文件

cd XXX

npm run serve

现在项目就运行完成了

参考文章:

参考1:文章地址

参考2:文章地址

相关推荐

  1. vue创建项目

    2024-03-30 15:04:02       17 阅读
  2. 前端小白的学习(Vue2 )

    2024-03-30 15:04:02       12 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-30 15:04:02       19 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-30 15:04:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-30 15:04:02       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-30 15:04:02       20 阅读

热门阅读

  1. 蓝桥杯2016年第十三届省赛真题-立方变自身

    2024-03-30 15:04:02       20 阅读
  2. 前端开发学习笔记(1)

    2024-03-30 15:04:02       14 阅读
  3. Ant Design Vue 搜索下拉框

    2024-03-30 15:04:02       15 阅读
  4. MyISAM和InnoDB

    2024-03-30 15:04:02       17 阅读
  5. C++开源项目研究——gh0st远控(一)

    2024-03-30 15:04:02       18 阅读
  6. 华为NPU下安装apex

    2024-03-30 15:04:02       17 阅读
  7. DevOps流动:技术视角与价值流视角互为补充

    2024-03-30 15:04:02       17 阅读
  8. Golang基础-6

    2024-03-30 15:04:02       16 阅读