NodeJS管理工具nvm的安装与vue项目的创建

NodeJS管理工具nvm的安装与vue项目的创建

1、本地清理（如果之前从未安装过node，可忽略）

如果之前安装过node，需要先清理本地安装，参考教程：

windows中如何将已安装的nodejs高版本降级为低版本

Windows下完全卸载node.js并安装node.js的多版本管理工具nvm-windows

2、nvm管理工具的下载和安装

nvm 一定安装1.1.7版本的，1.1.9版本的会出现各种问题

nvm下载网址：https://github.com/coreybutler/nvm-windows/releases/tag/1.1.7

快捷下载地址：node版本管理工具nvm.rar-Web开发文档类资源-CSDN下载

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运行版本

在用户目录下的.npmrc文件中添加以下内容

我的用户目录：C:\Users\MC234

 registry=https://registry.npmmirror.com/
 home=https://npm.taobao.org
 prefix=D:\Environment\Vue\NodeJS\node_global
 cache=D:\Environment\Vue\NodeJS\node_cache

npm全局路径及cache路径设置

关于 Node.js 项目中的 .npmrc 文件

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' 不是内部或外部命令，也不是可运行的程序或批处理文件，则参考以下博客解决

报错 'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件_悟世君子的博客-CSDN博客_vue 不是内部或外部命令,也不是可运行的程序

7、推荐支持vue开发的UI库

第一个Element UI： Element - The world's most popular Vue UI framework

第二个Vant3： Vant 3 - Mobile UI Components built on Vue

8、温馨提示

• NodeJS最新版下载地址：下载 | Node.js 中文网

• NodeJS其他版本：CNPM Binaries Mirror

推荐使用 nvm，因为可实现node多版本切换，几乎不用配置环境变量。如果不想使用nvm，那就直接安装node，并做相应的配置，方法及参考博客如下：NodeJs 的安装及配置环境变量_zimeng303的博客-CSDN博客_nodejs安装及其配置环境变量，这篇博客最后推荐的一款切换镜像的工具：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相关配置：Maven的简介、下载、安装、配置及使用流程 - W-D-G（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项目

方法一：

方法二：