Vue入门记录/教程 1、基本环境与配置

前言

本文是作为vue自学的一个记录，作者此前没有任何学过vue的经验，这篇文章同样也可以作为入门者的一个参考，新手有一些地方有问题还请见谅

Vue简介

Vue是一种渐进式的JavaScript框架，由华裔前Google工程师尤雨溪编写，其名谐音view，意为其是一套基于构建用户界面的框架，2016年10月，vue迭代到2,0版本，由此在前端领域大受欢迎，2019年12月Vue3.0版本源码发布，截止写作文章为止，Vue3.0已经在官网宣布成为默认版本，本文学习vue2.0版本，从开发者反馈来看，Vue3.0兼容2.0的语法和API，同时也能享受到新版本的性能提升。
Vue优点：轻量级，双向数据绑定，组件化，耦合低（视图，数据·，结构），虚拟DOM，运行速度快。

环境配置准备

vue.js

首先需要一个vue.js文件，搜索vue.js，第一个就是官网
或者进入网址 https://v2.vuejs.org/v2/guide/installation.html 这里选择开发版本，对于初学者，在控制台里提供了报错信息，方便调试，下载开发版本备用

node.js

这里进入node.js的官网 http://nodejs.cn/download/ 下载

这里选择旧版本Windows安装包64位，安装开始，中间可以改路径
安装后，在cmd窗口内检查是否安装好

之后在node.js安装目录下建两个文件夹，作为缓存目录

之后输入两行命令

npm config set prefix ""
npm config set cache ""
引号内填写你的安装目录地址

之后在环境变量中加入

然后是配置npm

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v
cnpm config set prefix "D:\Software\node_global"
cnpm config set cache "D:\Software\node_global\node_modules"

注意对应自己的安装目录
这里注意赋予管理员权限，否则有可能被拒绝

如果使用cnpm的话，注意还要加一句
cnpm i
如果没有这句就会导致项目无法运行，这句是下载一些相关依赖

使用cnpm安装express环境，因为cnpm在国内访问速度快
出现这句说明安装好了

Vue-cli脚手架搭建项目

cmd下输入npm install -g @vue/cli（cnpm有一定的组件缺陷，所以用npm安装，过程较慢）
安装完成
检查是否安装成功
npm在安新版本前，需要卸载旧版本，下面是卸载命令

npm uninstall vue-cli -g
npm install -g @vue/cli
npm install -g @vue/cli-init

使用webpack打包工具，启动vue项目

创建一个工作区，cmd下进入其中，创建一个新项目

vue init webpack hellovue

保持cmd窗口运行，访问本地localhost8080
如图是vue的网页

开发工具

开发工具可以使用WebStorm或者vscode等开发工具，由于WebStorm不是免费的，而vscode已经安装过，也是免费
所以使用vscode
用Vscode打开刚才生成的vue所在目录
在这之前，eslint，vetur也需要安装，但其实已经安装过了，包括依赖
使用vscode打开刚才的文件夹

终端输入npm run dev 项目启动
至此vue基本配置准备工作完成
总结大概就是这样