vnm + nodejs 安装步骤 + Vue 用脚手架搭建3.0 框架详细步骤

vnm + nodejs 安装步骤 + Vue 用脚手架搭建3.0 框架详细步骤

先给大家啰嗦一下我遇到的坑：   我安装的是nvm，然后 安装的 yarn 。

问题：在安装vue3.0脚手架的时候，问题出现了， vue -V 不是内部或者外部指令。

解决方案  ： 往下看  二：安装脚手架

我开始在电脑上安装的nvm ，然后安装的node， 备注：安装nvm必须先把node卸载   

一.安装 nvm 详细的步骤：

      如果已经单独安装了node，建议卸载，然后开始按钮nvm

1. 先下载nvm 安装包：         ，选择 nvm-setup.zip   下载后直接安装

2.安装目录

这个是nvm 的目录，可以随便选。

node默认不变

3.验证是否安装成功

4.安装node.js

命令使用:  nvm install  <version>  [<arch>] 命令下载需要的版本，arch参数表示系统位数，默认是64位操作系统。如果是32位操作系统，需要执行命令：  nvm install 12.18.4  32  

64位操作系统执行命令:  nvm install 12.18.4

 

5.验证安装成功

6.这里说一下为什么用nvm  ? 

 nvm 可以切换不同的node版本，，比如你安装了 2个版本的nodejs  ，（12.18.4    和6.10.3 ）

需要切换使用命令：nvm  use 6.10.3

7.查看nvm 的所有指令：  nvm -v

 

二：安装脚手架

上面说了我安装的是nvm  和 jarn    (所有出现了vue -V 不是内部或外部指令

怎么解决并继续：往下看

1.先安装npm 淘宝镜像 

指令：npm i -g cnpm --registry=

2.安装 vue-cli3.0 ，这里是重点 @代表的是3.0

注意：安装vue-cli3.0之前，如果本地全局安装过 vue-cli， 需要先进行卸载

 

卸载成功后   开始  安装vue-cli3   以上版本

1. //指定版本安装            npm install -g @vue/cli@3.9.3

2. //安装vue-cli3最新版                npm install -g @vue/cli            ，我们这里安装最新版

cnpm install -g @vue/cli
# or
yarn global add @vue/cli

3.安装成功后  验证：vue  -V   (特别注意：V大写)

 

开始创建项目：

vue crate 项目名称

命令：vue create item_web

如果没有配置保存过，则只有以下两个选项：

② default（babel，eslint）：默认设置（直接enter）非常适合快速创建一个新项目的原型，没有带任何辅助功能的 npm包

③ Manually select features：手动配置（按方向键 ↓）是我们所需要的面向生产的项目，提供可选功能的 npm 包

我们选择    Manually select features   ,然后按回车

手动配置，根据你需要用方向键选择（按 “空格键”选择/取消选择，A键全选/取消全选）对应功能

描述：根据自己需求选

选择完后直接enter，然后会提示你选择对应功能的具体工具包，选择自己擅长或者使用广泛的（方便遇到问题时百度），简介如下：

① 首先会让你选择是否使用history router：Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）

hash： 浏览器url址栏 中的 # 符号（如这个 URL：，hash 的值为“ #/hello”），hash 不被包括在 HTTP 请求中（对后端完全没有影响），因此改变 hash 不会重新加载页面

history：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法（需要特定浏览器支持）

② css预处理器：主要为css解决浏览器兼容、简化CSS代码 等问题（ Sass诞生于2007年，最早也是最成熟的一款CSS预处理器语言）

下一步：*③ 何时检测：**

④如何存放配置 ：

⑤ 是否保存本次配置（之后可以直接使用）：

后面蓝色是选中的 

如果你安装了npm 也安装了Yarn ,,,,这里就会让你选择，我选的npm

开始创建，耐心等待，创建完成 如下：

 

项目目录结构

 

② router （路由）：

vue cli 2 ：“ router/index.js ”
vue cli 3：“router.js”（用法和做的事都一样）

③ 去掉 static 、 新增 public 文件夹

vue cli 2：static 是 webpack 默认存放静态资源的文件夹，打包时会直接复制一份到dist文件夹不会经过 webpack 编译

vue cli 3 ：摒弃 static 新增了 public 。vue cli 3 中“静态资源”两种处理方式：

• 经webpack 处理：在 JavaScript 被导入或在 template/CSS 中通过“相对路径”被引用的资源会被编译并压缩

• 不经webpack 处理：放置在 public 目录下或通过绝对路径被引用的资源将会“直接被拷贝”一份，不做任何编译压缩处理

④ index.html ：

vue cli 2 ：“index.html ”

vue cli 3 ：“public/index.html ”此模板会被 html-webpack-plugin 处理的

⑤ src/views：vue cli 3 的 src文件夹 新增 views文件夹 用来存放 “页面”，区分 components（组件）

⑥ 去掉 build（根据config中的配置来定义规则）、config（配置不同环境的参数）文件夹 ：

vue cli 3 中 ，这些配置 你可以通过 命令行参数、或 （在根目录 新建一个 fig.js 同名文件）里的 devServer 字段配置开发服务器

⑦ fig.js：配置Babel 。Vue CLI 使用了 Babel 7 中的新配置格式 。和 .babelrc 或 package.json 中的 babel 字段不同，这个配置文件不会使用基于文件位置的方案，而是会一致地运用到项目根目录以下的所有文件，包括 node_modules 内部的依赖。官方推荐在 Vue CLI 项目中始终使用 取代其它格式。

⑧ 根目录的一些其他文件的改变：之前所有的配置文件都在vue create 搭建时preset预设 或者 后期可以通过 命令参数 、

根据需要在根目录下新建 fig.js自行配置，eg：简单配置，更多配置详情参见官网：[/](/)