Vue项目创建和nodejs使用

Vue项目创建和nodejs使用

  • 一、环境准备
    • 1.1.安装 node.js【下载历史版本node-v14.21.3-x64】
    • 1.2.安装
    • 1.3.检查是否安装成功:
    • 1.4.在Node下新建两个文件夹 node_global和node_cache并设置权限
    • 1.5.配置npm在安装全局模块时的路径和缓存cache的路径
    • 1.6.配置系统变量:Node\node_global\node_modules
    • 1.7.编辑用户变量里的Path:Node\node_global
    • 1.8.安装淘宝镜像
    • 1.9.查看当前的npm镜像设置:
    • 1.10. 通过.npmrc文件更改源
    • 1.11.错误提示淘宝镜像过期
    • 1.12.express 模块进行测试
    • 1.13.全局安装webpack
    • 1.14.webpack : 无法加载文件 D:\Program Files\nodejs\node_global\webpack.ps1,因为在此系统上禁止运行脚本
    • 1.15.全局安装Vue-cli
  • 二、vite对比webpack
    • 2.1.Webpack
    • 2.2.Vite
    • 2.3.使用webpack打包模式
    • 2.4.vite打包模式
  • 三、创建Vue项目
    • 3.1.方法一【UI界面创建】
    • 3.2.方法二:vue init webpack 项目名【vue-cli2.x的初始化方式】
    • 3.3.方法三:vue create 项目名【vue-cli3.x的初始化方式】
    • 3.4.方法四:npm init vue@latest
  • 四、Vite-下一代的前端工具链
    • 4.1.使用vite构建项目
    • 4.2.构建一个 Vite + Vue 项目
  • 五、nvm 安装与使用
  • 六、【Vue2】项目
    • 6.1.axios模块
      • 6.1.1.安装axios模块
      • 6.1.2.在入口文件main.js中配置axios
      • 6.1.3.axios使用案例
      • 6.1.4.vue-axios使用案例
    • 6.2.关闭Vue的生产提示
    • 6.3.vue项目中无router文件夹,vue安装路由
    • 6.4.引入Vue Router路由Vue.js【v.3x】
    • 6.5.引入ElementUI组件库【Vue2 版本】
    • 6.6.main.js完整版
    • 6.7.页面创建UploadImg.vue
    • 6.8.修改App.vue
    • 6.9.创建路由配置router/index.js
    • 6.10.页面效果
  • 七、【Vue3】项目
    • 6.1.axios模块
      • 6.1.1.安装axios模块
      • 6.1.2.在入口文件main.js中配置axios
    • 6.2.关闭Vue的生产提示
    • 6.3.vue项目中无router文件夹,vue安装路由
    • 6.4.引入Vue Router路由Vue.js【v.4x】
    • 6.5.引入Element Plus组件库【Vue3 版本】
    • 6.6.main.js完整版
    • 6.7.页面创建UploadImg.vue
    • 6.8.修改App.vue
    • 6.9.创建路由配置router/index.js
    • 6.10.页面效果
  • endl

一、环境准备

1.1.安装 node.js【下载历史版本node-v14.21.3-x64】

下载地址:https://nodejs.org/en/

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

1.2.安装

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

1.3.检查是否安装成功:

npm -v
node -v

在这里插入图片描述

1.4.在Node下新建两个文件夹 node_global和node_cache并设置权限

在这里插入图片描述

1.5.配置npm在安装全局模块时的路径和缓存cache的路径

默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中且占用C盘空间
在这里插入图片描述

在node.js安装目录Node下新建两个文件夹 node_global和node_cache

npm config set prefix "D:\DeveloperTools\Node\node_global"npm config set cache "D:\DeveloperTools\Node\node_cache"npm config list

在这里插入图片描述

1.6.配置系统变量:Node\node_global\node_modules

NODE_PATHD:\DeveloperTools\Node\node_global\node_modules在path里面加 %NODE_PATH%

在这里插入图片描述
在这里插入图片描述

1.7.编辑用户变量里的Path:Node\node_global

编辑用户变量里的Path,将相应npm的路径改为:

D:\DeveloperTools\Node\node_global

在这里插入图片描述

1.8.安装淘宝镜像

阿里巴巴镜像站官网:http://mirrors.aliyun.com/
官网:http://www.npmmirror.com/

使用管理员身份运行命令

# 国外npm本身
npm config set registry https://registry.npmjs.org/# 淘宝镜像
npm config set registry https://registry.npmmirror.com

在这里插入图片描述

在这里插入图片描述

1.9.查看当前的npm镜像设置:

命令查看配置

npm root -gnpm config listnpm config get prefix

在这里插入图片描述

1.10. 通过.npmrc文件更改源

可以看到C盘用户目录下的.npmrc文件

.npmrc优先级高于环境变量

在项目的根目录或用户的主目录中,创建或编辑.npmrc文件
在这里插入图片描述
在这里插入图片描述

1.11.错误提示淘宝镜像过期

npm 淘宝镜像已经从 registry.npm.taobao.org 切换到了 registry.npmmirror.com

# 原来淘宝镜像
npm config set registry https://registry.npm.taobao.org# 删除
npm config delete registry# 清空缓存
npm cache clean --force# 配置列表
npm config list

在这里插入图片描述

在这里插入图片描述

1.12.express 模块进行测试

//进入安装目录
cd D:\DeveloperTools\Node\node_global\node_modules//-g代表全局安装
npm install express -gnpm uninstall express -g

在这里插入图片描述

1.13.全局安装webpack

使用管理员身份运行命令

npm install webpack -g npm install webpack-cli -g# 查看安装webpack的版本号
npm webpack -v
npm webpack-cli -v

在这里插入图片描述

1.14.webpack : 无法加载文件 D:\Program Files\nodejs\node_global\webpack.ps1,因为在此系统上禁止运行脚本

解决方案:

以管理员身份运行
执行:get-ExecutionPolicy,显示Restricted,表示状态是禁止的
执行:set-ExecutionPolicy RemoteSigned
这时再执行get-ExecutionPolicy,就显示RemoteSigned
get-ExecutionPolicy#set-ExecutionPolicy Restricted
set-ExecutionPolicy RemoteSignedget-ExecutionPolicy

在这里插入图片描述

1.15.全局安装Vue-cli

#vue-cli3 可视化,使用vue-cli3.x初始化项目安装这个
npm install -g @vue/cli#vue-lcli2,使用vue-cli2.x初始化项目安装这个
npm install -g vue-clivue --version

在这里插入图片描述
在这里插入图片描述

二、vite对比webpack

2.1.Webpack

将所有的模块提前编译、打包进 bundle 中,不管这个模块是否被用到,随着项目越来越大,打包启动的速度自然越来越慢。

2.2.Vite

瞬间开启一个服务,并不会先编译所有文件,当浏览器用到某个文件时,Vite 服务会收到请求然后编译后响应到客户端。

2.3.使用webpack打包模式

在这里插入图片描述

2.4.vite打包模式

在这里插入图片描述

三、创建Vue项目

vue官网:https://cn.vuejs.org/
在这里插入图片描述

3.1.方法一【UI界面创建】

vue uihttp://localhost:8000/project/select

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.2.方法二:vue init webpack 项目名【vue-cli2.x的初始化方式】

#创建项目
vue init webpack test-vue#进入目录
cd teat-vue#初始化
npm install#运行
npm run dev

在这里插入图片描述

#vue 3.0 使用 vue-cli 2.0创建webpack项目时出现
#创建命令
vue init webpack test-vue2Command vue init requires a global addon to be installed.
Please run npm i -g @vue/cli-init and try again.操作提示Please run npm i -g @vue/cli-init
执行npm i -g @vue/cli-init之后,再次执行创建命令即可
注意:项目名不要出现大写字母

在这里插入图片描述

3.3.方法三:vue create 项目名【vue-cli3.x的初始化方式】

#创建项目
vue create test-vue3#进入目录
cd teat-vue3#初始化
npm install#运行
npm run serve

在这里插入图片描述

3.4.方法四:npm init vue@latest

npm init vue@latestnpm init vue@latest 创建的 vue3 项目是基于 Vite 打包的
npm init vue@latest 安装并执行 create-vue,它是 Vue 官方的项目脚手架工具

在这里插入图片描述

四、Vite-下一代的前端工具链

Vite官网:https://www.vitejs.net/guide/

Vite 需要 Node.js 版本 >= 12.0.0

4.1.使用vite构建项目

npm create vite@latestnpm init vite@latest

在这里插入图片描述

4.2.构建一个 Vite + Vue 项目

# npm 6.x
npm create vite@latest my-vue-app --template vue
npm init vite@latest my-vue-app --template vue# npm 7+, 需要额外的双横线:
npm create vite@latest my-vue-app -- --template vue
npm init vite@latest my-vue-app -- --template vue

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五、nvm 安装与使用

github官网下载:https://github.com/coreybutler/nvm-windows/releases
在这里插入图片描述

六、【Vue2】项目

6.1.axios模块

6.1.1.安装axios模块

vue-axios|axios中文网:http://www.axios-js.com/zh-cn/docs/vue-axios.html
axios官网:https://www.axios-http.cn/docs/intro

npm install --save axios vue-axios//报错时使用--legacy-peer-deps
npm install --save axios vue-axios --legacy-peer-deps

6.1.2.在入口文件main.js中配置axios

#在入口文件main.js中配置
//引入vue
import Vue from 'vue'
//引入axios
import axios from 'axios'
//引入VueAxios
//安装VueAxios模块后,不需要在每个组件中单独导入axios,只需将axios请求改为this.axios
import VueAxios from 'vue-axios'
//把axios挂载到vue上
Vue.prototype.$axios = axios;//使用Vue.use来注册安装插件
Vue.use(VueAxios, axios)new Vue({el:'#app',render: h => h(App),
})
按照这个顺序分别引入这三个文件: vue, axios and vue-axios

6.1.3.axios使用案例

# 在入口文件main.js中配置
//引入Vue
import Vue from 'vue'
//引入axios
import axios from 'axios'
//把axios挂载到vue上
Vue.prototype.$axios = axiosnew Vue({el:'#app',render: h => h(App),
})
# 第三步:使用案例
this.$axios.get('/user?id=888').then((response) => {console.log(response.data)
}).catch( (error) => {console.log(error);
});

6.1.4.vue-axios使用案例

#在入口文件main.js中配置
//引入Vue
import Vue from 'vue'
//引入axios
import axios from 'axios'
//引入VueAxios
import VueAxios from 'vue-axios'//使用Vue.use来注册安装插件
Vue.use(VueAxios, axios)new Vue({el:'#app',render: h => h(App),
})
#第三步:使用方式有如下三种
#方式1
Vue.axios.get(api).then((response) => {console.log(response.data)
})
#方式2
this.axios.get(api).then((response) => {console.log(response.data)
})
#方式3
this.$http.get(api).then((response) => {console.log(response.data)
})

6.2.关闭Vue的生产提示

#在入口文件main.js中配置
//关闭Vue的生产提示
Vue.config.productionTip = false

6.3.vue项目中无router文件夹,vue安装路由

新建一个router文件夹,在文件夹下新建一个index.js文件

在这里插入图片描述

6.4.引入Vue Router路由Vue.js【v.3x】

Vue2使用v.3x
Vue Router官网【v3.x】:https://v3.router.vuejs.org/zh/
更新记录【3.x】https://github.com/vuejs/vue-router/releases

//报错时使用--legacy-peer-deps
//vue-router@3x 适用于 vue2
npm install vue-router@3//指定版本号
npm install vue-router@3.5.2 --save

在这里插入图片描述

#在入口文件main.js中配置
//引入VueRouter
import VueRouter from 'vue-router'//使用Vue.use来注册安装插件
Vue.use(VueRouter)//新建一个router文件夹,在文件夹下新建一个index.js文件
//引入路由器
import router from './router/index'// 创建和挂载根实例
new Vue({router, //将路由器注入到new Vue实例中,建立关联render: h => h(App),
}).$mount('#app');

6.5.引入ElementUI组件库【Vue2 版本】

ElementUI组件库官网:https://element.eleme.cn/#/zh-CN

npm i element-ui -S
//完整引入
//引入ElementUI组件库
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'//使用ElementUI组件库
Vue.use(ElementUI)

6.6.main.js完整版

在这里插入图片描述

import App from './App.vue'
//引入Vue
import Vue from 'vue'
//引入axios
import axios from 'axios'
//引入VueAxios
//安装VueAxios模块后,不需要在每个组件中单独导入axios,只需将axios请求改为this.axios
import VueAxios from 'vue-axios'
//引入VueRouter
import VueRouter from 'vue-router'
//完整引入
//引入ElementUI组件库
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//新建一个router文件夹,在文件夹下新建一个index.js文件
//引入路由器
import router from './router/index'//把axios挂载到vue上
Vue.prototype.$axios = axios;
//使用Vue.use来注册安装插件
Vue.use(VueRouter)
Vue.use(router)
Vue.use(VueAxios, axios)
//使用ElementUI组件库
Vue.use(ElementUI)
//关闭Vue的生产提示
Vue.config.productionTip = false// 创建和挂载根实例
new Vue({router, //将路由器注入到new Vue实例中,建立关联render: h => h(App),
}).$mount('#app');

6.7.页面创建UploadImg.vue

<template><div><el-form><el-form-item label="上传图片"><el-uploadlist-type="picture-card":multiple="false":action="uploadUrl":limit="1":on-success="onUploadSuccessIdCard"><i class="el-icon-plus"></i></el-upload></el-form-item></el-form></div>
</template><script>
export default {name: "UploadImg",data() {return {dialogImageUrl: "",file_id: "",dialogVisible: false,uploadUrl: "http://localhost:22100/filesystem/uploadFile", //文件上传地址datas: {},};},methods: {onUploadSuccessIdCard(response) {this.file_id = response.data.fileId;this.datas = response.data;this.dialogImageUrl = "http://192.168.229.141/" + response.data.filePath;},},
};
</script><style scoped>
</style>

6.8.修改App.vue

<template><div id="app"><HelloWorld /><!-- 导航链接 --><!-- 路由内容展示 --><router-view></router-view></div>
</template><script>
export default {name: "App",
};
</script><style>
</style>

6.9.创建路由配置router/index.js

//在路由文件router/index.js中配置
// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";//引入组件
import UploadImg from '@/components/UploadImg'//上传页//创建路由
const routes = [//定义路由{path: '/',name: 'UploadImg',component: UploadImg},
]//创建并暴露一个路由器
const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router

6.10.页面效果

npm rn serve

在这里插入图片描述

七、【Vue3】项目

6.1.axios模块

6.1.1.安装axios模块

vue-axios|axios中文网:http://www.axios-js.com/zh-cn/docs/vue-axios.html
axios官网:https://www.axios-http.cn/docs/intro

npm install --save axios vue-axios//报错时使用--legacy-peer-deps
npm install --save axios vue-axios --legacy-peer-deps

6.1.2.在入口文件main.js中配置axios

#在入口文件main.js中配置
import { createApp } from 'vue'
import App from './App.vue'//引入axios
import axios from 'axios'
//引入VueAxios
//安装VueAxios模块后,不需要在每个组件中单独导入axios,只需将axios请求改为this.axios
import VueAxios from 'vue-axios'const app = createApp(App);//使用Vue.use来注册安装插件
app.use(VueAxios, axios)app.mount('#app')//createApp(App).mount('#app')
按照这个顺序分别引入这三个文件: vue, axios and vue-axios

6.2.关闭Vue的生产提示

#在入口文件main.js中配置
//关闭Vue的生产提示
app.config.productionTip = false

6.3.vue项目中无router文件夹,vue安装路由

新建一个router文件夹,在文件夹下新建一个index.js文件

在这里插入图片描述

6.4.引入Vue Router路由Vue.js【v.4x】

Vue3使用v.4x
Vue Router官网【v4.x】:https://router.vuejs.org/zh/
更新记录【4.x】https://github.com/vuejs/router/releases

//vue-router4x 适用于 vue3
npm install vue-router@4//指定版本号
npm install vue-router@4.2.5 --save
import { createApp } from 'vue'
import App from './App.vue'//引入路由器
import router from './router/index'const app = createApp(App);//使用Vue.use来注册安装插件
app.use(router)app.mount('#app')

在这里插入图片描述

6.5.引入Element Plus组件库【Vue3 版本】

Element Plus组件库官网:https://element-plus.gitee.io/zh-CN/

npm install element-plus --save
// main.ts
import { createApp } from 'vue'
//引入Element Plus组件库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

6.6.main.js完整版

import { createApp } from 'vue'
import App from './App.vue'//引入axios
import axios from 'axios'
//引入VueAxios
//安装VueAxios模块后,不需要在每个组件中单独导入axios,只需将axios请求改为this.axios
import VueAxios from 'vue-axios'
//新建一个router文件夹,在文件夹下新建一个index.js文件
//引入路由器
import router from './router/index'
//引入Element Plus组件库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App);
//关闭Vue的生产提示
app.config.productionTip = false//使用Vue.use来注册安装插件
app.use(VueAxios, axios)
app.use(router)
app.use(ElementPlus)app.mount('#app')

6.7.页面创建UploadImg.vue

<template><div><el-form><el-form-item label="上传图片"><el-uploadlist-type="picture-card":multiple="false":action="uploadUrl":limit="1":on-success="onUploadSuccessIdCard"><i class="el-icon-plus"></i></el-upload></el-form-item></el-form></div>
</template><script>
export default {name: "UploadImg",data() {return {dialogImageUrl: "",file_id: "",dialogVisible: false,uploadUrl: "http://localhost:22100/filesystem/uploadFile", //文件上传地址datas: {},};},methods: {onUploadSuccessIdCard(response) {this.file_id = response.data.fileId;this.datas = response.data;this.dialogImageUrl = "http://192.168.229.141/" + response.data.filePath;},},
};
</script><style scoped>
</style>

6.8.修改App.vue

<template><div id="app"><HelloWorld /><!-- 导航链接 --><!-- 路由内容展示 --><router-view></router-view></div>
</template><script>
export default {name: "App",
};
</script><style>
</style>

6.9.创建路由配置router/index.js

import { createRouter, createWebHistory } from 'vue-router'const routerHistory = createWebHistory(process.env.BASE_URL)import UploadImg from '@/components/UploadImg'
// 定义路由
const routes = [{path: '/',name: 'UploadImg',component: UploadImg},
]// 创建路由器
const router = createRouter({history: routerHistory,routes: routes
})export default router;

6.10.页面效果

npm rn serve

在这里插入图片描述

endl

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/468814.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java 基于springboot+vue在线外卖点餐系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

社区店选址地理位置评估:大数据分析的力量

大家好&#xff0c;我是一名有着 5 年开店经验的鲜奶吧创业者。在这 5 年的时间里&#xff0c;我深切地体会到了选址对于一家社区鲜奶吧的重要性。一个好的地理位置可以为你的店铺带来源源不断的客流&#xff0c;而一个糟糕的位置则可能让你的创业之路充满坎坷。 在这里&#…

vscode-python的debug 教学(最全)

vscode中的python-debugger的使用 Visual Studio Code 的主要功能之一是其强大的调试支持。VS Code 的内置调试器有助于加速编辑、编译和调试循环。 一、 安装python-debugger插件 在插件库内搜索python Debugger&#xff0c;安装插件 三、 进行debug&#xff08;不带参数…

矩阵特征值分解(EVD)

关于求解特征值和特征向量参考《特征值和特征向量-CSDN博客》

5秒!全网最简单的幻兽帕鲁服务器搭建教程来了!

幻兽帕鲁官方服务器不稳定&#xff1f;自己搭建幻兽帕鲁服务器&#xff0c;低延迟、稳定不卡&#xff0c;目前阿里云和腾讯云均推出幻兽帕鲁专用服务器&#xff0c;腾讯云直接提供幻兽帕鲁镜像系统&#xff0c;阿里云通过计算巢服务&#xff0c;均可以一键部署&#xff0c;鼠标…

利用Pygame处理键盘事件

在游戏开发中&#xff0c;处理用户输入是至关重要的一部分。玩家的键盘操作可以控制游戏中的角色移动、交互和其他行为&#xff0c;因此游戏如何响应键盘事件将直接影响玩家的游戏体验。在Pygame中&#xff0c;处理键盘事件是一个基础且重要的技能&#xff0c;本文将介绍Pygame…

基于Keras和LSTM单参数预测中兴通讯股票走势,结果震惊,含代码数据集

1.前言 昨天用分类算法预测大A各个股票的第二天行情&#xff0c;预测结果出现了千股下跌的场景&#xff0c;结果着实让我震惊&#xff0c;预测结果如下图&#xff0c;有没有可能预测第二天究竟涨了多少或者跌了多少呢&#xff1f;毕竟短线交易见好就收呢&#xff1f; 通过查找…

iTop-4412 裸机程序(二十二)- RTC时钟

目录 0.源码1. RTC2. iTop4412 中的 RTC使用的相关寄存器3. BCD编码4. 关键源码 0.源码 GitHub&#xff1a;https://github.com/Kilento/4412NoOS 1. RTC RTC是实时时钟&#xff08;Real Time Clock&#xff09;的缩写&#xff0c;是一种用于计算机系统的硬件设备&#xff0…

【开源图床】使用Typora+PicGo+Gitee搭建个人博客图床

准备工作&#xff1a; 首先电脑得提前完成安装如下&#xff1a; 1. nodejs环境(node ,npm):【安装指南】nodejs下载、安装与配置详细教程 2. Picgo:【安装指南】图床神器之Picgo下载、安装与配置详细教程 3. Typora:【安装指南】markdown神器之Typora下载、安装与无限使用详细教…

Serverless是什么

Serverless的中文含义是无服务器&#xff0c;是一种云原生开发模式&#xff0c;可使开发人员专注构建和运行应用&#xff0c;而无需关注和管理服务器等底层基础设施及其运维。事实上&#xff0c;Serverless并不是真的不需要服务器&#xff0c;而是把服务器从应用开发中抽离出来…

lv15 平台总线驱动开发——ID匹配 3

一、ID匹配之框架代码 id匹配&#xff08;可想象成八字匹配&#xff09;&#xff1a;一个驱动可以对应多个设备 ------优先级次低&#xff08;上一章名称匹配只能1对1&#xff09; 注意事项&#xff1a; device模块中&#xff0c;id的name成员必须与struct platform_device中…

Java加密秘钥

1. Java加密秘钥 您可加密信息,使其避免未经授权的访问。您可通过Java密码技术对数据进行编码来加密。密码技术包含各种用于对网络上发送的数据进行编码和译码的加密秘钥。Java密码架构(JCA)和Java密码扩展(JCE)可让您在Java平台上执行密码。 Java加密秘钥是一连串控制数…