Vue 学习中遇见的问题 node安装 and Vue安装 -春风得意马蹄疾

说明：仅供参考和学习，部分资料来源于网络

框架

一个网站，包含很多的复杂功能，如果使用原生的js去实现所有功能，时间和精力耗费巨大
可以将 大部分相同的逻辑 抽出来， 封装起来， 以便下次使用， 封装的逻辑功能 —> 框架

前端三大框架

• • Angular.js
  • React.js
  • Vue.js（尤雨溪）

  相同之处：在于 都是用js语言实现的

后台框架：

• python : django 、 flask

下载配置node

• 安装node.js，安装完node.js之后，npm也会自动安装

• 官方网址 ：https://nodejs.org/zh-cn/download/

• 根据自己电脑系统及位数选择

msi和.zip格式区别：

• .msi是Windows installer开发出来的程序安装文件，它可以让你安装，修改，卸载你所安装的程序。说白了.msi就是Windows installer的数据包，把所有和安装文件相关的内容封装在一个包里。
  .zip是一个压缩包，解压之后即可，不需要安装
  下载完成后，双击安装包，开始安装，一直点next即可，安装路径默认在C:\Program Files下，也可以自定义修改

npm package manager表示npm包管理器

online documentation shortcuts 在线文档快捷方式

Add to PATH添加node安装路径到环境变量

安装完成后，.msi格式的安装包已经将node.exe添加到系统环境变量path中,如果你下载的是.zip格式，因为没有安装过程，所以需要手动将node.exe所在目录添加到环境变量path中，查看系统变量验证

配置完环境变量后
打开CMD窗口
执行命令
node -v查看node版本

node 下载完成后会自带npm
查看是否有npm
npm -V

安装Vue

全局安装脚手架工具vue-cli，命令如下：
由于 npm 安装速度慢，因此可以将默认镜像修改为淘宝的镜像。

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

检查是否修改成功

npm config get registry

npm 版本需要大于 3.0，如果低于此版本需要升级它：

sudo npm install -g npm

设置安装包路径

npm config set cache “~/nodejs/node_cache”

设置模块安装路径

npm config set prefix “~/nodejs/node_global”
之后使用命令安装的模块存储在~/nodejs/node_global/node_modules里

安装vue命令行工具

npm install vue -g

npm install vue-cli -g

npm install --global vue-cli

三条都可以安装

vue项目初始化命令如下，若没有安装webpack，则先安装webpack

npm install -g webpack

初始化vue

vue init webpack 项目名称

注：安装过程 中有个选项（Use ESLint to line your code ?选择 No ）

没有选择npm 则需要手动安装node包依赖
代码如下：

cd Vue项目文件内
npm install 

运行项目：

npm run dev

在浏览器上输入：localhost:8080，将会出现下面的vue初始页面：

结束项目：

ctrl+v，选择Y即可停止项目的运行

---

安装vue脚手架报错A complete log of this run can be found in。

无法正常运行，可能在下载时没有正常下载

解决方法：

首先删除本地依赖node包

清空 npm 缓存
清理缓存命令：

npm cache clean --force

输入npm install 或 cnpm install 后，再次启动

npm run dev 成功启动

或者 更新npm

全局更新

npm install npm -g

或者用淘宝镜像命令

cnpm install npm -g

全部无法解决 删除项目 重新创建Vue项目

---

创建 vue 组件

Programming is like sex:， one mistake and you’re providing support for a lifetime. ——Michael Sinz

困了 改天再续。。。。。。。。。