Vue开发易懂的快速入门 比官方手册易懂

作为一个老程序员, 突然间遇到Vue这个 “萌新的小姑娘” 突然间觉得, 自己真的老了.

我感觉主要问题是官方手册整的有点不是很清晰.
Vue开发 一下子引入了很多的技术链, 工具链, 概念链, 使得我们这些个刀耕火种过来的老程序员突然间有点适应不过来… 最主要的是入门文档写的不易懂, 没有讲清楚概念, 弄的模模糊糊的… 就几条命令. 感觉懵懵的. 真的自己动手操作过之后就明白了.

看Vue的官方文档, 也是看的懵懵的. 这些文档都有一个缺点, 都没讲概念,定位 理清关系.

好,我下面就按照一个传统程序员的思维来有参照性的对比, 让你快速理解Vue的开发中用到的一些概念.

首先说明 Vue.js 本身只是一个js框架,是一个JavaScript类库, 可以压缩成一个独立的js文件. 跟jquery是一个级别的. 我曾经在一个项目中完全没有用到 ***.Vue 文件也照样可用Vue.js 框架来开发项目. (咳咳. 虽然这个是不正宗的用法…)

那么这种直接引入Vue.js的用法既然已经过时了, 咱们就来讲一下目前比较流行的新式的前端开发的流程和需要用到的工具…

现在新的前端开发流程已经. 不再直接写js文件了,在新流程下先写的是.Vue文件.( 只是一种文件而已. ) 目的是为了组件化, 为了继承和方便使用. 好处很多. 自己以后慢慢感悟

例如下面这个生成的App.vue 文件,一定要大概的看过才明白.

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Vue文件将界面分成了3个独立部分分别是

1. html骨架写在 template中,
2. 脚本写在 script 中,
3. 样式写在 style 中

但是这种.vue文件是无法之间引入到浏览器中的. 浏览器还是只用传统的 html 和JavaScript,
那么这种文件如何才能在客户的浏览器中正常运行呢?
这就要用到Vue的工具链了.

首先vue文件需要编译成js文件和html文件, 这个过程就需要一个程序来进行编译(构建),
这个编译(构建)工具就是Vue-cli (俗称vue脚手架), 它的作用就是把.vue文件编译成js文件和html文件.(可能说的不全面, 先这么着吧)

那么这个Vue-cli (俗称vue脚手架) 还要其它的什么全家桶, 这些先不管, 先讲最主要的.
Vue-cli 是一个程序, 由JavaScript编写, 运行在Node.js之上的.本地程序.

那么什么是Node.js ?

它是由谷歌浏览器的JavaScript执行引擎改造成的本地程序. 它可以执行本地的JavaScript脚本,
而且有很多额外的强大功能可以访问本地文件, 好像语法也有些改进. 具体的咱就不细致研究下去了. 还可以用它开发服务器端…
说白了就是一个特殊的谷歌浏览器改造成的 exe 程序

那么这整条的工作流程线应该已经讲清楚了.
下面我们就讲一下如何快速的入门
首先这整套东西都依赖于Node.js
**1先装一下Node.js **
这个很简单到这里 https://nodejs.org/zh-cn/去下载安装就可以了, 我装的是12.18.4, 我的是win7系统.
一路安装, 我就不说了 . 很简单.
装完Node.js之后, 会自动安装上另外一个东西, npm , 这个东西是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题.类似
.net 的 nuget,
java 的 maven
Python 的 pip
Rust 的 Cargo
c,c++ 语言中的 包管理器 好像还真没有.主要是太复杂
那么安装完Node.js之后. 咱们就可以直接使用 npm命令了.
我们用它安装一下Vue-cli编译器 Dos 命令是
为了提高安装时的下载速度可以改成从阿里去下载源

$ npm config set registry https://registry.npm.taobao.org/

然后执行安装

$ npm install -g @vue/cli@3

这样我们就有了,Vue文件的编译(构建)工具. 同时也可以使用Vue命令啦.
注意版本， 目前vue4有很多的项目是不支持的。我这里一般装vue3

2. 创建一个项目
简单起见，我一般都是用下面这个可视化界面创建项目。

vue ui

如果你不嫌麻烦可以执行下面的命令
我们创建 一个vuedemoproject

$ cd /vuedemo  ::先定位到某个目录下
$ vue create vuedemoproject

这样就OK啦第一个Demo就创建好了,然后下面开始运行项目，这个命令行不是非常方便。 我们可以用vue ui 来创建项目更方便直观。
执行命令。然后后面的操作就很简单了。

3. 运行项目

npp run serve

可以直接运行了.
访问 http://localhost:8080 应该能看到界面运行效果如下.

剩下的就是慢慢的研究 vue create vuedemoproject 生成的文件了. 里面的东西, 虽然多, 但也不至于摸不着头脑.
另外还有一个很重要的命令叫 Vue 项目管理器
执行如下的命令即可弹出界面.

vue ui

Vue 项目管理器 的作用点进去看看我相信不用我说你也知道它是干啥用的.
你可以用它运行项目、打包项目，检查等操作。还可以查看运行依赖和开发依赖的以及在线安装和更新依赖，非常方便.