一、nodejs
vue-cli使用的是nodejs的命令和编码风格。
Node.js封装了javascript的运行环境,可以让js代码直接运行
作用:
-
nodejs是在服务端运行javascript的运行环境
-
avascript并不只是能运行在浏览器端,浏览器端能够运行js是因为浏览器有js解析器,因此只需要有js解析器,任何软件都可以运行js。
-
nodejs可以在服务端运行js,因为nodejs是基于chrome v8的js引擎。
1、nodejs环境配置
-
安装nodejs
-
在nodejs的安装目录下创建:node_global和node_cache
-
配置环境变量
用户变量设置:将用户变量中 PATH 的值后面添加;C:\nodejs\node_global;
系统变量设置:添加变量 NODE_PATH 值为:C:\nodejs\node_modules,,然后添加到path环境变量中 -
配置node安装模块的路径
使用管理员模式在cmd中运行如下命令
//设置npm的全局和本地安装目录
npm config set prefix "C:\nodejs\node_global"
npm config set cache "C:\nodejs\node_cache" -
修改npm默认镜像【可选】
有时候用npm拉取包可能会很慢,可以用淘宝cnpm镜像代替npm进行拉包
在命令窗口执行: npm install -g cnpm --registry=https://registry.npm.taobao.org
然后就可以用 cnpm install express -g 进行拉包了,和npm一样 -
运行js
创建test.js文件
for (var i = 0; i < 10; i++) {
console.log(i);
}
function say() {
console.log('hello');
}
say();运行方式:
1、打开命令窗口cmd ,切换到该文件所在的目录,node test.js
2、在vscode中运行,给vscode安装terminal插件,直接在vscode中执行 ,node test.js
3、在WebStorm中通过terminal命令界面执行 node test.js2、nodejs模块
a、global模块
global模块在nodejs中是全局的变量,相当于javascript的window
-
__dirname:获得当前路径,不包括文件名
-
__filename:获得当前路径,包括文件名
b、fs模块
fs模块是nodejs中用来读写文件的模块
fs模块需要先导入才能使用
var fs = require("fs");
-
读取文件
var fs = require("fs");
//参数1: 文件的名字
//参数2: 读取文件的回调函数
//参数1:错误对象,如果读取失败,err会包含错误信息,如果读取成功,err是null
//参数2:读取成功后的数据(是一个Buffer对象)
fs.readFile("hello.txt", function(err, data){
if (err) {
return console.log(err); //打印错误消息
}
console.log(data);//输出读取内容
});
c、path模块
path模块是用来操作路径的模块。
path模块需要先导入
const path = require('path');
path.join()可以自动识别操作系统并添加合适的"/"
console.log(path.join("user","list","add"));
2、nodejs的包管理
nodejs有一个包管理器npm,我们在编写前端项目时所需要所有js库都可以通过npm下载对应的模块,除此之外还提供了一套管理项目的命令。
-
初始化包命令
将一个目录初始化为一个nodejs项目
npm init //这个命令用于初始化一个包,创建一个package.json文件,我们的项目都应该先执行npm init
npm init -y; //快速初始化 -
为项目安装所需的包
npm install 包名; //安装指定的包名的最新版本到项目中
npm install 包名@版本号; //安装指定包的指定版本
npm i 包名; //简写安装包有两种方式:
全局安装
npm install 包名 -g //-g表示全局安装,会将包安装到nodejs根目录的C:\nodejs\node_global\node_modules下面,只要在 这台电脑上开发,相同的包就不再需要安装第二次
npm install 包名 //局部安装,会将包安装到当前项目的node_modules中,如果其他项目要用只能重新安装 -
卸载包
npm uninstall 包名; //卸载已经安装的局部包
npm uninstall 包名 -g; //卸载已经安装的全局包
二、vue-cli 脚手架
vue-cli就是一套管理vue项目生命周期的工具.
1、vue-cli环境搭建
-
在nodejs中安装vuecli模块
npm i vue-cli -g //安装最新版本的vue-cli -
安装webpack模块
npm install webpack -g -
创建vue项目
vue init webpack 项目名 -
运行项目
进入到项目根目录运行如下命令
npm run dev
-
停止发布项目
控制台中ctrl+c 输入y
2、vue-cli项目结构
-
build 目录
webpack 相关配置目录,一般不用管
-
config目录
vue项目的配置目录
index.js 项目的一些配置 如:项目的访问端口 -
node_modules 项目所需模块安装目录 【关注一下就OK】
当在项目中安装局部模块时,会将模块安装到该目录
-
src目录
项目的根目录
-
assets
项目静态资源存放目录
-
components 【重点】
组件存放的目录(模板,js,css)
-
router【重点】
路由文件存放目录
-
App.vue
主组件,挂载点下的坑
-
main.js 【重点】
挂载点的js配置
-
-
index.html
项目入口界面
-
package.json
项目的描述信息
3、导出模块语法
export default :将一个js中的内容导出,让另一个js可以使用。默认只能导出一个,所以一般导出一个对象
4、安装axios模块
安装axios模块
npm i axios -g
导入axios
要在哪个地方使用axios就在哪个地方导入他
//导入安装的axios包
import axios from "axios";
export default {
name: "Login",
...
}