vue学习笔记

Quickstart
To use this template, scaffold a project with vue-cli. It is recommended to use npm 3+ for a more efficient dependency tree.

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

问题一：
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
 

解决方案：

npm install --save  -g core-js@^3

created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次；

activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等
 

 

4. 运行 Laravel Mix
Laravel Mix 一款前端任务自动化管理工具，使用了工作流的模式对制定好的任务依次执行。Mix 提供了简洁流畅的 API，让你能够为你的 Laravel 应用定义 Webpack 编译任务。Mix 支持许多常见的 CSS 与 JavaScript 预处理器，通过简单的调用，你可以轻松地管理前端资源。

使用 Mix 很简单，首先你需要使用以下命令安装 npm 依赖即可。我们将使用 Yarn 来安装依赖，在这之前，因为国内的网络原因，我们还需为 Yarn 配置安装加速：

$ yarn config set registry https://registry.npm.taobao.org
使用 Yarn 安装依赖：

SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass yarn
在 yarn 命令前添加 SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass 的目的是告诉 yarn 到淘宝的镜像去下载 node-sass 二进制文件。

 

yarn add socket.io-client

然后我们还需要修改一下 Mix 的配置文件：

webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .version();
在末尾加了一个 version()，使 Mix 每次生成的静态文件后面加上一个类似版本号的参数，避免浏览器缓存。

然后，运行以下命令即可：

$ npm run watch-poll
watch-poll 会在你的终端里持续运行，监控 resources 文件夹下的资源文件是否有发生改变。在 watch-poll 命令运行的情况下，一旦资源文件发生变化，Webpack 会自动重新编译。

注意：在后面的课程中，我们需要保证 npm run watch-poll 一直处在执行状态中。
Windows 用户如果遇到报错请参考 https://laravel-china.org/topics/13277/in-learning-lessons-there-are-always-craters-recording-solutions

问题：gyp ERR! node-gyp -v v3.8.0

解决方法：安装gyp命令 npm install -g node-gyp

npm install -g yarn

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

SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass yarn

问题：gyp verb `which` failed Error: not found: python2

解决方案：

安装gyp命令 npm install -g node-gyp ；
安装Python 2.7（v3.x.x不支持），安装后要配置环境变量。成功后执行npm config set python python2.7
执行 npm config set msvs_version 2017
Vue初始化