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

大家好，欢迎来到IT知识分享网。

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

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

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

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

一.安装 nvm 详细的步骤：

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

1. 先下载nvm 安装包： https://github.com/coreybutler/nvm-windows/releases        ，选择 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=https://registry.npm.taobao.org

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：http://www.abc.com/#/hello，hash 的值为“ #/hello”），hash 不被包括在 HTTP 请求中（对后端完全没有影响），因此改变 hash 不会重新加载页面

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

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

下一步：*③ 何时检测：

④如何存放配置 ：

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

后面蓝色是选中的 

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

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

项目目录结构

② router （路由）：

③ 去掉 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 中 ，这些配置 你可以通过 命令行参数、或 vue.config.js （在根目录 新建一个 vue.config.js 同名文件）里的 devServer 字段配置开发服务器

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

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

根据需要在根目录下新建 vue.config.js自行配置，eg：简单配置，更多配置详情参见官网：[https://cli.vuejs.org/zh/config/](https://cli.vuejs.org/zh/config/)

module.exports = {   
baseUrl: '/',// 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)    
outputDir: 'dist',// 运行时生成的生产环境构建文件的目录(默认''dist''，构建之前会被清除)   
assetsDir: '',//放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')    
indexPath: 'index.html',//指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。    
pages: {//pages 里配置的路径和文件名在你的文档目录必须存在 否则启动服务会报错        
index: {//除了 entry 之外都是可选的            
entry: 'src/index/main.js',// page 的入口,每个“page”应该有一个对应的 JavaScript 入口文件            
template: 'public/index.html',// 模板来源            
filename: 'index.html',// 在 dist/index.html 的输出            
title: 'Index Page',// 当使用 title 选项时,在 template 中使用：<title><%= htmlWebpackPlugin.options.title %></title>           
chunks: ['chunk-vendors', 'chunk-common', 'index'] // 在这个页面中包含的块，默认情况下会包含,提取出来的通用 chunk 和 vendor chunk        },        
subpage: 'src/subpage/main.js'//官方解释：当使用只有入口的字符串格式时,模板会被推导为'public/subpage.html',若找不到就回退到'public/index.html',输出文件名会被推导为'subpage.html'    },    
lintOnSave: true,// 是否在保存的时候检查    
productionSourceMap: true,// 生产环境是否生成 sourceMap 文件    
  css: {        extract: true,// 是否使用css分离插件 ExtractTextPlugin        
    sourceMap: false,// 开启 CSS source maps        
    loaderOptions: {},// css预设器配置项        
    modules: false// 启用 CSS modules for all css / pre-processor files.    
  },    
  devServer: {// 环境配置        
        host: 'localhost',        
        port: 8080,        
        https: false,        
        hotOnly: false,        
        open: true, //配置自动启动浏览器        
        proxy: {// 配置多个代理(配置一个 proxy: 'http://localhost:4000' )            
            '/api': {                
                  target: '<url>',                
                  ws: true,                
                  changeOrigin: true            
            },            
            '/foo': {                
               target: '<other_url>'            
             }        
        }    
   },    
  pluginOptions: {// 第三方插件配置        // ...    
  }
};