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、项目启动

执行完第二步后,会生成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配置等
相关推荐
并不会31 分钟前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子34 分钟前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、35 分钟前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜35 分钟前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师37 分钟前
CSS的三个重点
前端·css
耶啵奶膘2 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie4 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿5 小时前
webWorker基本用法
前端·javascript·vue.js