Vue之项目搭建

咿呀咿牙哟
260 阅读2分钟

前言

兜兜转转，走走停停。一直想要写个博客把自己每天学习的东西记录下来，然而万事开头难，每次都倒在了起点，今天就借着这个机会把之前学习过的一个Demo记录下来，也算为以后的路途开个头！

浅谈我认识的Vue

理解尚浅，大佬轻喷

近年来，前端技术变革速度太快，Vue作为前端的3大主流框架之一，影响力可见一般。相比以前的原生Js和jQuery，它有他独特的优势。

  • 将原来直接操作dom的思想转变到直接操作数据上
  • 组件化可以使我们的工程易于维护、易于组合拓展
  • MVVM 模式都能帮助我们进行分层，代码解耦更易于读写
  • 框架都自带生态,有成熟的数据流管理架构和配套的 UI 库。

搭建项目

搭建Vue项目有两种方式，一种是标签引入，一种是搭建Vue-cli脚手架

  1. 标签引入

    首先我们先去Vue官网找到安装教程，这里我们采用 scrpit标签 引入Vue.js的依赖包。

    点击 开发版本 下载之后，我们就可以把已下载好的vue.js放入我们要准备开发的项目中引用。

    
<html>
	<head>
		<meta charset="utf-8" />
		<title>标签引入Vue.js</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
		</div>
	</body>
	<script type="text/javascript">

	new Vue({
		el:"#root",
		data:{
			message:'hello world',
		}
	})
	</script>
</html>

  2. vue-cli脚手架

    1. 先全局安装 Node.js 我们可以去Node.js官网进行下载；

    2. 然后打开终端检查是否安装成功，输入 node -v&npm -v ；如出现对应的版本号，则安装成功，然后如何我们再进行下一步；

    3. 安装淘宝镜像，终端输入 npm install --registry=https://registry.npm.taobao.org

    4. 全局安装Vue，终端输入 npm install -g vue-cli ；

    5. 创建项目 vue create <projectName>；一路回车到底

    6. cd进入已创建的项目下，然后 npm install 初始化依赖包；

    7. 待依赖包安装完毕之后，然后 npm run dev 启动项目运行调试

写在后面

其实有想过很多的文章和项目要写，删了写，写了删,简直像无头苍蝇一样到处乱撞。

原因无非就是如下几点

  • 有的demo太小，感觉搬上来不太合适，
  • 有的写的太浅，感觉没有深度可言
  • 项目太大不懂得拆解其中的技术点来分析记录

...

但是还是决定从这一篇开始，慢慢对去学习的知识点进行逻辑化的梳理，对项目进行拆分，事无巨细，有用的还是都记录下来，希望写文章来记录自己的成长，加油吧，来自于一个转行的前端汪🐶卑微的怒吼。。

avatar
文章
阅读
粉丝