01 新手上路node.js + vue.js ：一步一个脚印的踏向~...

最新推荐文章于 2023-07-07 22:42:09 发布

jmlw

最新推荐文章于 2023-07-07 22:42:09 发布

阅读量236

点赞数 1

分类专栏：前端文章标签： vue npm js nodejs

本文链接：https://blog.csdn.net/Xin11099/article/details/118291805

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue.js官网下载或者这个主页
 node.js官网下载官网有对于的doc API文档

Vue.js的API参考了AngularJS、KnockoutJS、Ractive.js和Rivets.js，因此作为一个后来者，Vue.js是对上述框架的总结和优化

正常使用的显示为

npm 使用国内镜像源（taobao 也是从npm官网clone的备份镜像）
使用cmd进行换源

npm config set registry https://registry.npm.taobao.org

# 或者每次使用指定源网址下载包
npm install packetName  --registry=https://registry.npm.taobao.org

方法二：通过安装cnpm 工具作： cnpm = npm

# 使用全局方式安装 --global
npm install --global cnpm
# 安装包 （--save 参数是把安装的包，对应的包名放入到package.json文件中的 dependencies中）
cnpm install packetName --save

【注】node中为了简化路径输入，不同模块require导入有不同的规则

# 升级npm  包版本（packetName）
npm install --global npm 
# 查看配置文件，安装源地址
npm config list
# npm 助手
npm --help
# npm 详解
npm  install --help
# npm init 初始化包创建到package.json文件中（ 加入 -y 参数会已默认形式添加）
npm init -y
# npm install 会按照packae.json文件中的dependencies依赖进行下载模块包
npm i

对应的npm操作查看–信息

【注】另外VUE可以通过CDN方式进行引入vue ,可以指定对应的版本号，防止出现版本不兼容情况

例子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>welcome to vue.js!!</title>
</head>
<body>
	<h1>welcom to vue.js!</h1>
	<div id="app">
		<!-- show context info -->
		{{text}}
	</div>
	<!-- development version, includes helpful console warnings  引入vue-->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
	<script>
		// <!-- init Vue -->
		var app = new Vue({
		// <!-- 指定id属性里面的app -->
		el:'#app',
		// <!-- data  -->
		data:{
			text:'hello , welcom to learning vue.js!!!'
		}
	}) 
	</script>
</body>
</html>

浏览器不能直接识别.vue文件，和html文件一样不能直接引入到vue中，使用vue.js文件，使用webpack打包工具将.vue文件编译成普通的JavaScript文件，再使用页面引入的方式执行JavaScript文件。

npm install webpack
#安装执行命令的webpack 工具  cli
npm install webpack-cli
# 安装vue加载和编译工具vue-loader和vue-template-compiler
npm install vue & npm install vue-loader
npm install vue-template-compiler

安装完成后当前目录的package.json文件会有相应的安装显示

当前目录下创建webpack.config.js 文件，用来配置webpage打包工具，具体内容为：cmd创建文件夹md或者mkdir
创建文件 :cd .> webpack.config.js

下面为node.js 部分

创建express 包且可以在全局中，直接cmd可以使用express（ express version > 4.0）
npm install express-generator -g

mkdir  blog

express -e  blog

cd blog & npm install 

cd .. & express -e blog

在这里插入图片描述

目录作用：
app.js ：项目启动入口
bin ：二进制执行文件
package.json 工程信息和模块依赖，执行npm install 会检查此文件并安装所有指定的模块（当要添加依赖模块时）
node_modules：存放package.json安装的模块，添加依赖模块会存储在此文件夹中
public ：images、css、js、html文件
routes ：视图文件（模板文件）

切换目录并安装包
cd blog & npm install
启动服务
SET DEBUG=blog:* & npm start
浏览器访问：
http://localhost:3000/

在这里插入图片描述

更改index.js文件的title，重新启动？

自己创建一个js文件，使用express项目

#当前目录创建一个name.js
mkdir name.js
# 当前目录创建express项目:先初始化，再安装包模块
npm init
# 当前会有一个package.json内容文件，以及一个模块包文件夹
npm install express
# 4.版本后使用下面的 加了 -g 表示为全局安装
npm insstall express-genertor
# 在name.js文件中加入以下内容--------------
// 导入安装包
const express = require('express')
const app = express()
// 设定跟路由显示 Hello nodejs
app.get('/', (req, res) => res.send('Hello nodejs'))
// 监听3000 端口作为http服务
app.listen(3000, () => console.log('Example app listening on port 3000!!!!!!'))
#--------------------------end------------------
#最后在浏览器中输入 或者 127.0.0.1:3000 回车
http://localhost:3000/

显示如下

http 请求方式

RESTful API设计规范，对client客户端请求的五种划分：

client请求服务器后服务器返回的状态码

【注】状态码还可以用来表示其他含义，如300系列的重定向、400系列的客户端错误和500系列的服务器错误等。通过HTTP查看具体的状态码并且了解其含义，可以方便地定位问题所在

jmlw

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01 新手上路node.js + vue.js ：一步一个脚印的踏向~...

vue.js官网下载或者这个主页node.js官网下载官网有对于的doc API文档Vue.js的API参考了AngularJS、KnockoutJS、Ractive.js和Rivets.js，因此作为一个后来者，Vue.js是对上述框架的总结和优化正常使用的显示为【注】另外VUE可以通过CDN方式进行引入vue ,可以指定对应的版本号，防止出现版本不兼容情况例子<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫