Node及vue cli脚手架

2.Node安装配置与介绍

• 什么是Node或NodeJS

• • node是环境是一个javascript运行时环境，可以让js运行在服务端

  • 它的出现主要像java那样写服务端

• npm -随着node的安装自动安装的

node 类似 idea
npm 类似 idea使用的maven工具
 
 Node Package Manager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块(包)的标准

• 配置

配置本地安装与全局安装路径

step1:在安装目录下手动创建目录node_cache,node_global

step2: 配置环境变量

用户环境变量path中添加:

D:\Program Files\nodejs\node_global

系统环境变量新建NODE_PATH
D:\Program Files\nodejs\node_modules

• npm基本使用语法

  npm install 包名;  //安装指定的包名的最新版本到项目中
  npm install 包名@版本号;  //安装指定包的指定版本
  npm i 包名； //简写

  // 全局安装,会把npm包安装到C:\Users\cc\AppData\Roaming\npm目录下，作为命令行工具使用
  npm install -g 包名;     -- global全局
  
  //本地安装，会把npm包安装到当前项目的node_modules文件中，作为项目的依赖
  npm install 包名;  

  npm cache clean -f  // -f强制清除

• • package.json文件

    类似于maven项目中的pom.xml

    包(项目)描述文件，用来管理组织一个包(项目)，它是一个纯JSON格式的

         描述当前项目(包)的信息，描述当前包(项目)的依赖项

  • 有时出现npm下载包失败时，再次下载会出错，需要强制清理缓存

  • 本地安装与全局安装

  • yarn 新出的与npm相同的功能

• 使用node执行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.VueCli脚手架

3-1 VueCli简介

 Vuejs -- 这个产品是对原生js的封装 ，简化jsdom操作

 VueCli 是一个平台，执行vuejs的项目环境，提高开发前端项目的效率

  |- webpack打包工具 -类似后端tomcat

a) webpack

前端项目工程化的标志之一就是引入了『编译』环节，而 webpack 就是最常见、最常用的前端项目编译工具

我们是 “直接使用脚手架，间接使用 webpack” 去管理、编译我们的 web 前端项目源码

b) VueCli脚手架简介

- vue-cli是 vue 的脚手架工具

- 作用 : vue-cli 提供了一条命令, 我们直接通过这条命令就可以快速的生成一个 vue 项目
         生动生成一系列关于webpack的相关配置
       

3-2 安装vueCli脚手架工具

使用node的npm来装

统一  安装vue-cli4

npm uninstall -g vue-cli  卸载旧版

npm uninstall -g @vue/cli  卸载新版


-------------------------------下载并安装指定的vue版本
npm install -g @vue/cli@4.5.15

安装完成后，使用vue --version或 vue -V 查看 vuecli脚手架工具版本信息

vue -V

显示： @vue/cli 4.5.15

3-3 创建VueCli项目

进入到项目所在的目录中

选择最后一项Manually select 手动选择参数

 具体细节略

• 启动安装的vuecli项目

  npm run serve

  

3-4 项目目录说明

3-5 初始项目的运行流程

3-6 ES6基础语法-导入导出

import 和 export   导入与导出

|-针对于js库和vue组件 ,css样式进行操作

|-要import的对象，必须在声明的文件中先导出export

• 导出分为两种

• • export  --可以有多个，但不能先声明再导出，必须声明的同时导出

  • export default --一个文件只能有一个

自定义a.js文件

let str = 'abc'
let num = 20;
let obj = { name :'zs' }

//export deafult:
//1.每次只能导出一个变量或对象
//2.一个文件最多只能有一个export default
//export default num

export default {x:num,y:str,z:obj}

//export导出必须是在声明定义变量对象时导出
export let x=123

export let login = () =>  {
    console.log('登录');
}

// 注册一个函数
export let register = () =>  {
    console.log('注册');
}
  
export let name = "张三"

在main.js中测试导入:

 import Vue from 'vue'  //当不使用相对路径时,会去本地node_modules中查找 vue.js包  <script src="vue-2.6.xx.js"></script>
import App from './App.vue' //指定相对路径名,查找当前路径下组件
import router from './router' //导入router目录下的默认文件 index.js

import xx from './a.js'   //针对于 export default
import * as res from './a'  //针对多个export

//关闭用于生产环境的提示信息
Vue.config.productionTip = false

//创建根组件对象
new Vue({
  router,  //注册路由
  render: h => h(App)  //指定根组件模板元素
}).$mount('#app')  //挂载模板

console.log('变量的值:'+xx.x+","+xx.y);

console.log("----------------------------------------");
res.login();
res.register();
console.log(res.x);
console.log(res.name);

3-7 关于细节的补充

(1) 修改前端服务端口号

默认情况下通过 serve 命令运行项目会占用 8080 端口，如果想作出改变的话，可以在项目的根目录下(即，和 package.json 文件同级)创建一个名为 vue.config.js 的文件，并在其中加入如下配置

module.exports = {
    devServer: {
      port: 9000
    }
}

(2) 单文件组件

在 vue-cli 创建的 vue 项目中，我们看到有一类后缀名为 .vue 的文件

『单文件组件』

 .vue 文件『编译』成传统的、正常的、浏览器认识的 html 中嵌 js 和 css 的形式，这就是 vue-cli 背后的 webpack 所要负责处理的事情了

vue文件组件部份:

单文件组件的组成结构分三部分：

- template - html 组件的模板区域
- script  -  业务逻辑区域 data,methods,componets...
- style     样式区域

示例：

<template>
    <div>
        <h1>登录界面</h1>
        <button @click='goHome'>进入首页</button>
    </div>
</template>

<script>
export default {
   data() {
      return {

      }
   },
   methods:{
        goHome(){
            this.$router.push('/home');
        }
   },
   created(){

   }
}
</script>

<style scoped>
    h1 {
        color:red;
    }
</style>

可以自定义vue文件的模板：

vsCode- >File ->首选项->'配置用户代码片断' ->vue.json 打开，可以定制

更新index.js路由的配置

import Vue from 'vue'    //基础vue.js库
import VueRouter from 'vue-router'  //导入本地库第三方js库文件
import Home from '../views/home/Home.vue' // 开发的组件文件,导入的是组件对象
import Login from '../views/login/Login.vue'

Vue.use(VueRouter)  //将路由对象与Vue对象关联
//调用Vue.use()时会调用插件的install方法,使得其能够全局使用 全局导入,其他要使用路由的地方,无需再import


const router = new VueRouter({
  routes:[
    {path:'/',redirect:'/login'}, //路由重定向
    {path:'/login',name:'Login',component:Login},
    {path:'/home',name:'Home',component:Home}
  ]
})

export default router

开发模式

3-8 安装ElementUI组件库

Element是(饿了么团队)根据MVVM结构Vue开源出来的一套前端ui组件。官网：element-ui

使用vue-admin-template来快速建立后台管理

Jquery.js -Bootstrap

Vue.js --> ElementUI

Element是(饿了么团队)根据MVVM结构Vue开源出来的一套前端ui组件。官网：element-ui

使用vue-admin-template来快速建立后台管理,

安装:

 npm i element-ui

快速上手

// 在main.js 中引入
// 引入 element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 使用use安装一下
Vue.use(ElementUI)

参考ElementUI官网编写登录页面，并实现表单验证

https://element.eleme.cn/#/zh-CN/component/form