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.配置选项

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值