Vue Cli 终端创建项目

1.安装nodejs

官网下载稳定版本nodejs安装包 Node.jshttps://nodejs.org/zh-cn/

2.安装完成后 node -v，输出版本信息，安装成功；npm -v 输出版本信息 查看npm是否安装完成

3.安装vue 脚手架命令：

npm install -g @vue/cli

问题记录：

（1）报错信息：

npm ERR! Unexpected end of JSON input while parsing near '...fy":"^16.3.0","commit'

解决方案：

npm cache clean --force //清除cache

（2）报错信息

npm ERR! code ENOENT
npm ERR! syscall rename
npm ERR! path D:\Program Files\nodejs\node_global\node_modules\@vue\cli\node_modules\_fsevents@1.2.10@fsevents\node_modules\safe-buffer
npm ERR! dest D:\Program Files\nodejs\node_global\node_modules\@vue\cli\node_modules\express\node_modules\safe-buffer
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, rename 'D:\Program Files\nodejs\node_global\node_modules\@vue\cli\node_modules\_fsevents@1.2.10@fsevents\node_modules\safe-buffer' -> 'D:\Program Files\nodejs\node_global\node_modules\@vue\cli\node_modules\express\node_modules\safe-buffer'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

解决方案：这个错误就是进错目录了，设置一下工作区的文件夹，然后重新输入命令就行了，即在安装nodejs的根文件夹下执行npm install 命令。例如：我的nodejs安装在D:\Program Files\nodejs下，那么npm install 命令要在D:\Program Files路径下执行

（3）报错信息

npm ERR! code EEXIST
npm ERR! path D:\Program Files\nodejs\node_global\node_modules\@vue\cli\bin\vue.js
npm ERR! dest D:\Program Files\nodejs\node_global\vue
npm ERR! EEXIST: file already exists, cmd shim 'D:\Program Files\nodejs\node_global\node_modules\@vue\cli\bin\vue.js' -> 'D:\Program Files\nodejs\node_global\vue'
npm ERR! File exists: D:\Program Files\nodejs\node_global\vue
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.

解决方案：

先把缓存清掉---->在命令行内输入 npm cache clean --force

如上可能不行，查看vue -V 还是之前的版本,可以手动将C:\Users\Admin..\AppData\Roaming\npm-cache 这下面的文件删掉。
如还不行，先卸载，再安装（使用管理员运行cmd）。
npm uninstall -g vue-cli  

npm install -g @vue/cli

4.安装完成后使用 vue -V 查看是否安装成功。

补充：npm 设置淘宝镜像的两个方法

永久使用：

npm config set registry https://registry.npm.taobao.org

这样配置以后都是用淘宝的镜像下载资源 国内的访问速度会比较快。

直接安装使用：

npm install -g cnpm --registry=https://registry.npm.taobao.org

以后使用cnpm 代替npm。

推荐使用第一种方式 不改变原来的名称 只是换了一个下载资源。

5.进人到准备放置项目代码的文件夹中（其实是项目的父文件夹）

6.输入命令 vue create XXX（项目名称，名称不能再包含大写字母）创建新项目

7.自定义设置项目功能选项说明

8.配置路由跳转模式

history模式和hash模式的区别参见这位大神的文章，个人感觉写的蛮好的

Vue-router 中hash模式和history模式的区别_Benjamin的博客-CSDN博客Vue-router 中hash模式和history模式的区别在通过vue-cli创建项目的时候，出现:于是，去Google一遍。。vue-router的model有两种模式：hash模式和history模式。Vue-router 中hash模式和history模式的关系hash模式和history模式的不同最直观的区别就是在url中 hash 带了一个很丑的 # 而history是...https://blog.csdn.net/yexudengzhidao/article/details/87689960/?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0.no_search_link&spm=1001.2101.3001.4242vue router中hash模式和history模式的区别_半度℃温热-CSDN博客面试问答    hash 模式与 history 模式的区别，这个也是面试常问的问题，不要小看这道题其实问到这里的时候那个面试官应该是个大牛，开发经验丰富，这个题其实就是考验你的开发经验是否属实。    小白回答： hash 模式 url 带 # 号，history 模式不带 # 号。    大牛解答： hash 模式 url 里面永远带着 # 号，我们在开发当中默认使用这个模式。那么什么时...https://blog.csdn.net/fu983531588/article/details/93636855?utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1.no_search_link

 9.配置css预处理

10.配置代码校验规则

 11.配置选项