NodeJS管理工具nvm的安装与vue项目的创建
NodeJS管理工具nvm的安装与vue项目的创建
1、本地清理(如果之前从未安装过node,可忽略)
如果之前安装过node,需要先清理本地安装,参考教程:https://blog.csdn.net/weixin_44582077/article/details/110237056
2、nvm管理工具的下载和安装
nvm 一定安装1.1.7版本的,1.1.9版本的会出现各种问题
nvm下载网址:https://github.com/coreybutler/nvm-windows/releases/tag/1.1.7
快捷下载地址:https://download.csdn.net/download/weixin_45688268/80397810
3、检验nvm是否安装成功,进入命令控制行窗口(win+R--->cmd--->确定)
- 输入命令 nvm v 出现以下情况,即nvm安装成功
- 输入命令 nvm ls available 查看可安装的node版本,没有显示全
4、配置国内淘宝镜像
arch: 64
proxy: none
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
5、安装node.js
- 输入命令 nvm install node版本号 (例如:nvm install 10.8.0) 即可安装对应版本以及自动安装对应的npm版本
- 安装成功后,输入命令 nvm use node版本号 (例如:nvm use 10.8.0),即可选择你本地所使用的Node.js版本(选择Node.js版本后自动配置环境变量,不用自己去配置)
-
输入命令 node -v 和 npm -v 检验node.js以及对应npm是否安装成功
-
输入命令行 nvm ls 查看你安装的所有node.js版本号,以及你当前所选择的node.js运行版本
6、安装开发脚手架vue-cli
-
安装 vue 和 vue-cli 脚手架
-
先卸载之前版本,若是首次安装可忽略 npm uninstall -g @vue/cli
-
安装 vue-cli 想要的版本 npm install -g @vue/cli@4.5.12
-
安装 vue想要的版本 npm install -g vue@2.6.14
-
- 检查 vue-cli 是否安装成功 vue -V 检查 vue 是否安装成功 npm list vue(使用nvm管理node时查不出来,但本地已存在,忽略即可)
安装完成后,检查安装版本时如果出现报错 'vue' 不是内部或外部命令,也不是可运行的程序或批处理文件,则参考以下博客解决
https://blog.csdn.net/wsjzzcbq/article/details/90173009
7、推荐支持vue开发的UI库
第一个Element UI: https://element.eleme.cn/#/zh-CN/component/installation
第二个Vant3: https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart
8、温馨提示
-
NodeJS最新版下载地址:http://nodejs.cn/download/
-
NodeJS其他版本:https://registry.npmmirror.com/binary.html?path=node/
推荐使用 nvm,因为可实现node多版本切换,几乎不用配置环境变量。如果不想使用nvm,那就直接安装node,并做相应的配置,方法及参考博客如下:https://blog.csdn.net/zimeng303/article/details/112167688,这篇博客最后推荐的一款切换镜像的工具:nrm 很不错。
最终使用nvm管理node版本,使用nrm管理镜像,工欲善其事必先利其器,这样以来使用vue开发项目就会变得给常容易!
9、创建基于vue-cli脚手架的vue项目
9.1 命令行创建项目
1、创建一个Vue项目,我们随便建立一个空的文件夹在电脑上,我这里在D盘下新建一个目录
2、创建一个基于webpack模板的vue应用程序
- vue init webpack 项目名
特别注意:安装组件和安装依赖是在你新建的项目路径中进行,即初始化项目后,使用cd 项目名(这里是cd Vue-Online)进入项目路径,下面的截图缺少进入该项目路径这一步
3、安装基本的依赖
-
安装组件(插件)axios、vue-router、element-ui、vuex
-
npm install axios -s
-
npm install vue-router --save-dev
-
npm i element-ui -S
-
npm install vuex --save
-
-
安装依赖
- npm install
- 进入项目路径下,然后启动该项目
9.2 可视化创建项目
1、命令行窗口输入 vue ui 打开可视化窗口
2、按照如下步骤依次操作
9.3 使用IDEA打开(接管)刚才的“Vue-Online”项目
-
完成Maven相关配置:https://www.cnblogs.com/mc-blog/p/15130344.html(JDK版本不同,自行修改)
-
使用IDEA打开Vue-Online项目,然后安装Vue插件
- 如果插件一直搜不到,查看博客解决,或者去官网下载插件,然后把文件复制到自己的IDEA安装路径下的对于位置
- 完成后重启,新建Vue文件时,颜色会从灰色变成绿色,此时所有工作都已完成!
9.4 将项目中src文件夹中的文件全部替换
-
components文件夹中的内容
- Home.vue
<template> <div> <div style="color: red;margin-left: 600px;margin-top: 200px"> 首页设计<br> <router-link to="/product">商品页</router-link> </div> </div> </template> <script> export default { name: 'Home' } </script> <style scoped> </style>
- Product.vue
<template> <div> <div style="color: red;margin-left: 600px;margin-top: 200px"> 商品页设计 </div> </div> </template> <script> export default { name: "Product" } </script> <style scoped> </style>
-
router文件夹中的index.js
import Vue from 'vue' import Router from 'vue-router' import Home from "../components/Home"; Vue.use(Router); export default new Router({ mode: 'history', routes: [ { path: '/', //默认打开页面 name: 'Home', component: Home //引用页面的第一种方式 }, { path: '/product', name: 'Product', component: () => import('@/components/Product') //引用页面的第二种方式 } ] });
-
App.vue
<template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script> <style scoped> </style>
-
main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import ElementUI from 'element-ui' import VueRouter from 'vue-router' import axios from 'axios' import router from './router' import Vuex from 'vuex' Vue.use(Vuex); Vue.use(ElementUI); Vue.use(VueRouter); Vue.config.productionTip = false; Vue.prototype.axios = axios; /* eslint-disable no-new */ new Vue({ el: '#app', router, render: h => h(App) });
9.5 使用IDEA启动Vue项目
方法一:
方法二: