背景

作为一名程序猿学习前端基础知识，因此学习下 Vue 框架及其基础命令。

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

  • Vue 只关注视图层， 采用自底向上增量开发的设计。
  • Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

其它 JS 和 Vue 区别：

  • JS 首先都要获取到 DOM 对象，再对 DOM 对象进行进行值的修改等操作；
  • Vue 是首先把值和 JS 对象进行绑定，再修改 JS 对象的值，Vue 框架就会自动把DOM的值就行更新；

入门

参考教程：

安装

首先需要安装 node，再安装 Vue 命令行工具。

采用 NPM 方式：

1
$ npm install -g vue-cli

新建项目

创建一个基于 webpack 模板的新项目，按需进行配置【回车默认即可】

1
$ vue init webpack project-name

📢 注意 MacOS 在 Vue 项目初始化可能存在错误：gyp: No Xcode or CLT version detected!

重新安装 CLT (command line tools) 即可解决！

1
2
3
4
5
xcode-select --print-path
# in my case /Library/Developer/CommandLineTools
sudo rm -rf $(xcode-select --print-path)
# install them (again) if you don't get a default installation prompt
xcode-select --install

初始化完成后即可在当前目录下生成系列文件：

1
2
3
4
5
6
7
8
9
10
11
12
.
├── README.md # 说明文档
├── build  # 项目构建(webpack)相关代码
├── config # 配置目录，包括端口号等。
├── index.html # 首页入口
├── node_modules # npm 加载的项目依赖模块
├── package-lock.json
├── package.json # 项目配置文件
├── src # 开发目录
├── static # 态资源目录，如图片、字体等。
├── .xxxx # 配置文件，包括语法配置，git 配置等。
└── test # 测试目录

src 为开发目录，里面包含了几个目录及文件：

  • assets: 放置一些图片，如 logo 等。
  • components: 目录里面放了一个组件文件，可以不用。
  • App.vue: 项目入口文件，可以直接将组件写这里而不使用 components 目录。
  • main.js: 项目的核心文件。

进入项目后执行 npm run dev 即可在 http://localhost:8080/ 访问初始页面。

项目打包

执行命令：npm run build

执行完成后，会在 Vue 项目下生成一个 dist 目录，一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 image。

📢 注意：打开 dist/index.html 页面空白，修改标签 src 的路径为相对路径即可。