node下的vue

node下的vue

node:node相当于前端的服务器，用于编译js，vue和react框架可以在node环境下进行执行和安装，为了让js下的ES6和typeScript进行兼容，可以通过node环境进行编译

webpack:模块打包机，可以将项目打包成浏览器兼容的格式，或者打包成手机app等

vue脚手架cli:帮助你快速搭建项目，给项目进行分包分层，进行环境配置

npm命令

node -v查看node版本

npm install模块名 安装模块

npm install -g模块名 全局安装

npm install -s 模块名 安装到项目环境下

npm uninstall 模块名 卸载模块

npm install vue-cli 安装vue2.0脚手架

npm install @vue/cli 安装vue3.0脚手架

vue -V查看vue版本

npm install @vue/cli registry https://registry.npm.taobao.org 国内镜像

vue init webpack项目名 安装vue2.0项目

vue create项目名 搭建vue3.0项目

cd项目名 进入到项目文件夹

npm start或者npm run dev启动2.0项目

npm run serve 启动vue3.0项目

项目网址

  - Local:   http://localhost:8080/

  - Network: http://192.168.31.108:8080/

项目文件内容

mode_modules项目的依赖包，node命令，或者自己按照的模块都在这里，

public公共资源目录，静态文件夹，例如放图片，页面等

src写vue代码的

.gitignore配置git的文件或文件夹

babel.config.js使用一些预设，进行选项配置

README.md定义项目描述，例如解释命令的作用

package.json项目描述和依赖信息

package-lock.json模块的版本管理使用的文件

src文件夹

assets静态文件夹，用来放图片，css,字体等

components放自己定义的组件文件

App.vue 页面的入口组件，一个vue文件就是一个组件

main.js  vue的主入口

vue文件

template定义html，在vue2.0时，template下只允许放一个标签，但是可以嵌套多个

script定义js语法

style定义css样式，在style里写入scoped,用于创建局部样式，其他vue文件无法引用

data的定义

Data(){//用函数声明

Return{str:”asda”}

}

为什么data要定义成函数

因为组件是用来复用的，js里的对象是引用关系，如果组件的data是一个对象，那么作用域就没有隔离，子组件中的data属性会相互影响，data如果是个函数，每个实例被返回的是对象独立的拷贝，才会让组件之间没有影响

node下路由

Npm install vue-router安装vue2.0的路由

Npm install vue-router@next

Npm i vue-router@next install

第一步：引入路由模块

import {cteateRouter,createWebHashHistory} from 'vue-router'

第二步：定义要跳转的组件

import Center from './components/Center.vue';

第三步：给组件配置路径

var routers=[{path:"/",components:Center}]

第四步：创建路由对象，指定history模式

var router=createRouter({

    history:createWebHashHistory(process.env.BASE_URL),

    routers

})

export default router

校招题：路由有几种定义模式

hash模式：路径后面会带#，使用url的hash值来作为路由，支持所有浏览器，缺点是只能改变#后面的名称来实现路由跳转

history模式：可以像正常定义路径一样，会存储历史记录，缺点是刷新页面时，如果请求了后台服务器，每次刷新都会重新请求一次，就会耗时

abstrac模式：适用于所有js环境，也可以在nodejs里使用，如果没有浏览器API,路由将自动被降职进入此模式

引用createWebHistory对象是调用history模式

引用createWebHashHistory对象是调用history模式