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