nvm对node版本进行管理及疑难解决，vue项目搭建与启动-Toy模板网

这篇具有很好参考价值的文章主要介绍了nvm对node版本进行管理及疑难解决，vue项目搭建与启动。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、nvm安装与node版本管理

nvm安装

1、nvm地址：https://github.com/coreybutler/nvm-windows/releases
2、无需配置安装包，nvm-setup-v1.1.10.zip
解压后双击nvm-setup.exe，选择安装路径，一路next即可
打开dos窗口输入nvm version查看安装是否成功

node版本管理

1、nvm可配置国内镜像

在nvm安装路径下找到setting.txt文件，打开，新增如下信息
	node_mirror: https://npm.taobao.org/mirrors/node/
	npm_mirror: https://npm.taobao.org/mirrors/npm/
即可完成淘宝镜像的配置

2、nvm管理node版本

nvm list  nvm ls 已安装版本列表
nvm current 当前node版本
nvm install 版本号  安装指定node版本
nvm uninstall 版本号   卸载指定node版本
nvm use 版本号  切换到指定版本
nvm list available 显示可下载的版本列表

PS：若无法切换node版本，或者出现“‘npm’ 不是内部或外部命令,也不是可运行的程序或批处理文件”或者“‘node’ 不是内部或外部命令,也不是可运行的程序或批处理文件”问题时。使用nvm卸载所有版本node，手动卸载安装nvm之前的nodejs。然后使用nvm安装需要的node，再切换即可成功。

二、vue项目的搭建与启动

vue项目的搭建

Vue CLI是一个基于 Vue.js 进行快速开发的完整系统，提供：
通过 @vue/cli 实现的交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：
可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

1、搭建vue项目环境

 1、1  安装淘宝镜像源  npm install -g cnpm --registry=https://registry.npm.taobao.org
 1、2  安装vue-cli : npm install -g vue-cli

2、使用命令 vue init webpack test 搭建vue项目, “test ” 是你的项目名称。

Vue build ==> 打包方式，回车即可；
Install vue-router ==> 是否要安装 vue-router，项目中要使用到 Y
Use ESLint to lint your code ==> 是否需要 js 语法检测  n
Set up unit tests ==> 是否安装 单元测试工具  n ；
Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具  n ；

3、项目启动文章来源地址https://www.toymoban.com/news/detail-828037.html

执行完第二步后，会生成test目录，进入目录执行npm run dev即可启动项目，
或者执行npm install  yarn；yarn run dev也可启动

1、build：构建脚本目录
　　　　1）build.js ==> 生产环境构建脚本；
　　　　2）check-versions.js ==> 检查npm，node.js版本；
　　　　3）utils.js ==> 构建相关工具方法；
　　　　4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；
　　　　5）webpack.base.conf.js ==> webpack基本配置；
　　　　6）webpack.dev.conf.js ==> webpack开发环境配置；
　　　　7）webpack.prod.conf.js ==> webpack生产环境配置；
2、config：项目配置
　　　　1）dev.env.js ==> 开发环境变量；
　　　　2）index.js ==> 项目配置文件；
　　　　3）prod.env.js ==> 生产环境变量；
3、node_modules：npm 加载的项目依赖模块
4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
　　　　1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
　　　　2）components：组件目录，我们写的组件就放在这个目录里面；
　　　　3）router：前端路由，我们需要配置的路由路径写在index.js里面；
　　　　4）App.vue：根组件；
　　　　5）main.js：入口js文件；
5、static：静态资源目录，如图片、字体等。不会被webpack构建
6、index.html：首页入口文件，可以添加一些 meta 信息等
7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息
8、README.md：项目的说明文档，markdown 格式
9、 .xxxx文件：这些是一些配置文件，包括语法配置，git，svn配置等

到了这里，关于nvm对node版本进行管理及疑难解决，vue项目搭建与启动的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！