(笔记整理）与vue相关的问题总结（8）-1

一、vue之node.js的简单介绍
https://www.cnblogs.com/haiyan123/p/8371283.html

一、什么是node.js？

它是可以运行JavaScript的服务平台，可以吧它当做一门后端程序，只是它的开发语言是JavaScript

二、安装
1、node.js的特性：

• 非阻塞IO模型
• 时间驱动

2、运用的场景：

• 高并发低业务

• 实时场景

• 聊天、电子商务、视频直播等

3、安装地址：
http://nodejs.cn/
判断是否安装成功 node -v

进入编辑状态:node+回车，可以进行一些运算
退出编辑模式：ctrl+d或者ctrl+c两次

node 模式下

4、npm是一个包管理器，其实是一个命令。使用它来安装或者卸载包
首先进行项目初始化：npm init (快速初始化：npm init -y)，会生成文件：package.json
npm install 包的名字 --save-dev
npm install express --save-dev:把依赖包增加到开发环境下

npm install express
npm install express --save :吧依赖包增加到运行环境下

二、vue 之webpack打包工具的使用
https://www.cnblogs.com/haiyan123/p/8371817.html

一、什么是webpack?
webpack是一个模块打包工具。

用vue项目来举例：浏览器它是只认识js，不认识vue的。而我们写的代码后缀大多是.vue的，在每个.vue文件中都可能html、js、css甚至是图片资源；并且由于组件化，这些.vue文件之间还有错综复杂的关系。所以项目要被浏览器识别，我们就要使用webpack将它们打包成js文件以及相应的资源文件。

二、webpack的功能
  
    1、它可以吧CSS，JS图片当做模块来处理

2、它可以吧以上的这些文件进行打包压缩成一个JS文件，减少了HTTP的请求

3、根据模块之间的依赖关系进行分析，按需加载

4、可以安装一些插件，对插件进行打包处理
　　
三、安装

npm install webpack -g(全局的安装)
webpack -v #查看是否安装成功

改用淘宝镜像语句安装
cnpm install webpack -g

打包：
执行命令
webpack app/a.js public/b.js 、//意思是吧app下的a.js打包在public下的b.js

安装成功

四、创建vue项目

npm install vue-cli -g #-g全局
(sudo)npm install vue-cli -g #mac笔记本

vue-init webpack myvue #项目的名字
cd muvue
npm install
npm run dev

五、目录结构的说明

六、import和require的区别
import一定要放在文件顶部，他相当于一个指针引用了文件，并没有吧文件包含进来，需要调用文件时才引入
require可以吧文件放在任何位置，他是吧文件直接包含进来

七、设置文件路径的流程
1）建立组件（.vue的文件）
2）配置路由（index.js文件中配置）
3）
4)
5)import 包名 from “组件路径”
6)comonents进行注册

八、实现异步加载
//异步
vue-resource:实现异步加载数据（已经弃用）
axios：实现异步加载数据
npm install axios --save-dev
npm install vue-axios --save-dev

九、VUE的生命周期
1、定义vue对象并实例化
2、执行created函数
3、编译模板，只会编译template的模板
4、吧HTML元素渲染到页面当中
5、执行mounted函数，（加载）相当于onload
6、如果有元素的更新，就执行update函数
7、销毁实例

项目需要注意的问题

问题一：在手动执行webpack app/a.js publicndle.js打包时出错的解决方法需要修改为： require(“style-loader!css-loader!./style.css”)
问题2：脚手架生成项目后，运行 npm run dev启动项目后，
如果想把地址栏中的 #去掉，如：http://localhost:8080/#/news，需要在
router文件夹下的index.js文件中，加入 mode: “history”
问题三：引入axios的2种方法：
　　　　需要在main.js中进行设置：这2种方法都可以，但引用顺序不能翻转

如果查询当前的 webpack 版本？
webpack -v

（1）webpack 安装完成以后报错，
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:

(2) webpack-cli 还是报错，

安装成功测试

1、

2、

安装 neo-asyno

3/

4/


5/


6/



acorn
’@webassemblyjs/ast
‘@webassemblyjs/wasm-parser
@webassemblyjs/helper-module-context
@webassemblyjs/wasm-edit

@webassemblyjs/wasm-edit
schema-utils
ajv
ajv-keywords
文件路径： C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vuefff\vue-demo\ffftest>

node-libs-browser npm install node-libs-browser -g

micromatch npm install micromatch -g
eslint-scope
terser-webpack-plugin

https://blog.csdn.net/a4_9527/article/details/81045791

三、webpack4从安装到使用入过的那些坑

https://www.jianshu.com/p/c094e42b0bc2
官网中文教程：https://www.webpackjs.com/guides/installation/
npm文档：https://docs.npmjs.com/
1、全局安装
安装 webpack 前要确保已经下载 node.js 最新版本（node.js官网地址）
目前使用命令行安装的 webpack 默认为最新版本（以下我使用了全局安装。官网建议本地安装，这可以使我们在引入破坏式变更(breaking change)的依赖时，更容易分别升级项目。）

当我想确认是否安装成功，输入 webpack -v 后出现：

提示我们必须安装一个 CLI，有两个版本，Windows 安装 webpack-cli ，Mac 安装 webpack-command，输入以下命令：

然后再输入 webpack -v 确认是否安装成功：

至此，webpack4 才算安装完成（注意：如果 webpack 安装在全局，那么 CLI 也需要装在全局）。
2、初次打包

在旧版本 webpack 中，将 index.js 文件打包成 bundle.js 文件使用的是如下命令（webpack 入口文件 出口文件）：

报错如下：

上面警告说 mode 没有指定，可以指定值为 production 或 development，不指定默认为 production。
同时还有一个报错，没有找到模块，不能被解析（resolve）。
原因是，webpack4 的打包已经不能用 webpack 文件a 文件b 的方式（实际开发使用时也不推荐该方法）。

因此需要先建一个 package.json 文件，方法是先在根目录下使用命令行创建一个项目：

默认配置的话一路回车，就能在根目录下看到 package.json 文件了。

然后在在 package.json 中 scripts 中加入以下两行代码：

然后在命令行中执行