写在前言
- 本人没有接触过Vue1.0版本 ，这里就不做对比介绍了，有兴趣的同学可以自行上网查询
Vue 简介
- Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
- Vue 只关注视图层， 采用自底向上增量开发的设计。
- Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
- Vue 学习起来非常简单，本教程基于 Vue 2.9.6 版本测试。
环境/版本一览：
开发工具：Visual Studio Code （插件比较完善）
node.js：node-v8.11.3-x64.msi
Vue：2.9.6
前置条件
- 由于vue项目依赖 node.js 、npm 需要先安装. 若没有请先安装
- 检查是否有node.js 、npm 、vue
- WIN+R 输入cmd 进入DOS环境
- 输入node -v 回车 会出现node.js的版本
- 输入npm -v 回车 会出现npm的版本
- 输入vue -V （V大写）回车 会出现vue的版本
安装
- Node.js：https://nodejs.org/en/ 建议选择推荐版不要选择最新的
- vue ：npm install -g vue-cli --registry=https://registry.npm.taobao.org
- 由于npm网站在国内速度非常慢，所以可以在命令后面加上淘宝的镜像
- 是否安装成功运行上面的检测命令即可
创建Vue项目框架
1、指定项目路径：进入项目需放置的文件路径下
例如我想将新建项目放在wiki目录下，就先进入wiki根目录
2、创建项目命令：vue init webpack wiki-web (wiki-web是将要创建的项目workspace名称，会新创建文件夹)
- 不加镜像下载会有点慢，耐心等待下
- 依次按照提示输入，项目名、项目描述、项目作者等等，
- 然后一路回车 直到项目创建好。
3、启动项目
- cd wiki-web -- 进入项目workspace
- npm install -- 创建node_modules依赖文件夹
- npm run dev -- 启动项目
访问项目
- 输入上图中的启动地址，http://localhost:8081
项目结构
- 文件目录
- vsCode
- 目录解析
|
目录/文件 |
说明 |
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src |
这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
|
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |