Vue.js 学习路程

什么是Vue.js

Vue.js 官网

官方解释：
渐进式 JavaScript 框架
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
要点：构建用户界面（总的来说还是用来做前端页面）

优点

个人使用的感触：

1. 以前的页面渲染问题，更方便的数据渲染和数据对组件的绑定；
2. 路由和组件的使用更加便捷，模块的开发升级一个等级；
3. 开发方便，打包压缩体积；
4. 对比其他框架，如：AngularJS、React；

需要的生产环境

（1）Node.js 的安装

1.需要npm的运行环境,而npm一般在node.js里面包含,所以第一步是安装node.js
2.node.js 下载地址： 官网下载
3.下载版本需根据自身电脑选择，下载回来双击运行,不断下一步即可完成安装
4.npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）, NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题
5.优点：允许用户从NPM服务器下载别人编写的第三方包到本地使用；
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用；
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用；

（2）配置环境变量

我的电脑=>右键属性（打开如下窗口，从左到右打开）

上图的系统变量NODE_PATH 为node.js的安装路径
在PATH系统变量下添加路径：下面为Windows10系统，其它系统注意分号隔开

（3）判断是否安装成功

打开cmd（命令提示符窗口）输入命令：node -v、npm -v，结果如下即安装成功

（4）安装vue-cli（脚手架）

1.什么是vue-cli ？
这是一个好东西，以前的开发时使用的插件需要一个一个下载复制到对应文件，在页面使用

（5）Vue.js 2.0 和 Vue.js 3.0 创建项目的两种方法

1）Vue.js 2.0（使用vue-cli初始化项目 ,每次新建网站项目都是从这个步骤开始）

1.在需要创建项目的文件夹下打开cmd（路径栏输入cmd右键回车），或者按住Shift+右键,选择命令行工具：

2.cmd输入命令
命令行语法: vue+init+模板名字+项目名字
输入 vue init webpack test 并且回车 (test 是自己起的项目名字,首字母不能为大写 )

其中, webpack 是vue在github提供的一个通用的空白项目模板,这个命令会从服务器下载一个文件夹,把这个模板所有的文件都会复制到你本地的 ccc里面(没有这个文件夹它会创建),完成初始化工作.
官方还提供了其他的项目空白模板：
browserify - 拥有高级功能的 Browserify + vueify 用于正式开发。
browserify-simple - 拥有基础功能的 Browserify + vueify 用于快速原型开发。
webpack - 拥有高级功能的 Webpack + vue-loader 用于正式开发。
webpack-simple - 拥有基础功能的 Webpack + vue-loader 用于快速原型开发。
所以,一般使用webpack 包,或者 webpack-simple包.区别就是会不会下载更多的模板文件。
可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates

创建成功后，进入新建的文件夹 cd test
执行命令 npm install (再次下载一些依赖文件)，如果不行使用cnpm install
最后执行 cnpm run dev 会执行后端和前端,打开一个浏览器,网址栏输入：http://localhost:8080，回车。打开项目首页。之后再次打开再次输入该命令就可以。剩下的就是项目开发了

项目结构：
目录/文件 说明
build 配置文件代码存放位置。
config 配置目录，包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
src 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
• assets: 放置一些图片，如logo等,图片放在这里被引用的话,会被转成base64编码。
• 如果不想把图片转成base64编码,请把图片放到index.html隔壁的static目录下
• commponents: 目录里面放了一个组件文件，可以不用。
• App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 commponents 目录。
• main.js: 项目的核心入口文件。
static 静态资源目录，如图片、字体等。
test 初始测试目录，可删除
.xxxx文件 这些是一些配置文件，包括语法配置，git配置等。
index.html 首页入口文件，你可以添加一些 meta 信息或同统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档，markdown 格式
index.html 项目总入口文件

2）Vue.js 3.0

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件或者.html文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，继续你的创作。