vue-cli的基本配置 运行 导包 vue-cli 脚手架的使用

vue-cli

一、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.js

  2、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",
  ...
}
​