1.首先下载node.js,下载网站如下https://nodejs.org/en/,切记不要选择中文版本去下载点击LTS版本,左边的,无脑点击下一步。node。js是自带npm的
如果网页经常加载不出有bug,我推荐大家多敲
npm cache clean --fore来清除缓存
npm镜像切换淘宝镜像
npm config set registry https://registry.npm.taobao.org
查看镜像源是否切换成:
npm config get registry
第二步骤:安装yarn
npm install -g yarn
yarn 镜像切换淘宝镜像
yarn config set registry https://registry.npm.taobao.org/
查看yarn的路径
yarn config get registry
第三步:安装vuecli,直接打开https://cli.vuejs.org/zh/guide/installation.html,按照步骤操作参考文档上的最新代码我这个给你们参考用的,切记一定要指定版本号npm install -g @vue/cli 后面@版本(如3.9.2)。不加默认就变成最新版本,他会默认下vue2.5等
npm install -g @vue/cli@3.9.2
提醒:如果node-sass出错,要用 cnpm,删除你的项目中node_modules这个包
再打cnpm i
vue安装完成,安装完成如下显示:
可查看vue --version 查看版本号确认是否安装上了,正常是3.9.2
vue --version
第四步:创建项目:打开你的cmd,win+R,加cmd,在桌面创建个项目cd +拖到文件到cmd终端vue create .创建项目
vue create .
Babel 可解析css
TypeScript 更改开发语言
PWA 离线开发
Rounter 路由
Vuex 做复杂状态管理
CSS-pre-processors css预处理器
Linter /formatter 团队代码保持风格的一致性
安装步骤出现如下代码
? Generate project in current directory? Yes 意思是否这个文件夹下直接怼文件,直接打yes,打no就又创建了新文件
? Please pick a preset: 选第二个
?Manually select features ?选择你要的功能,你要什么选择什么空格确认 按回车
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?选择:In dedicated config files
? Save this as a preset for future projects? 其他项目要用的你项目吗?选NO
? Pick the package manager to use when installing dependencies: 选yarn还是npm ,选yarn创建
第五步创建成功执行,在集成终端中启动,一定要文件第一个目录,比如这个在app的内容启动
$ yarn serve
输入链接,复制到浏览器
代码对应的意思:
serve 是开发模式的启动
build 是上线模式的启动
lint 检查你的es-lint的风格给你修复
遇到的问题,没遇到就不用看了:
问题一:无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。
所在位置 行:1 字符: 1
+ CategoryInfo : ObjectNotFound: (vue:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
删除原来的vue,删除方法
1.cmd输入vue --version后直接如果显示出来版本号打where vue ,把链接找到直接手动删除,找到路径文件复制手动删除
where vue
重新装vue
npm install -g @vue/cli@3.9.2
问题二:yarn报错,系统上禁止运行脚本
kID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ CategoryInfo : SecurityError: (:) [],PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
yarn : 无法加载文件 C:\Users\hjt\AppData\Roaming\npm\yarn.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?Lin
kID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ yarn versiob
+ CategoryInfo : SecurityError: (:) [],PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
解决方案:
以 管理员身份 运行 Windows PowerShell ,输入以下命令:
set-ExecutionPolicy RemoteSigned
输入y可解决
问题三:网页加载不了
多敲
npm cache clean --fore来清除缓存
问题四:代码错误ECONNREFUSED
npmERR! node v6.9.5npmERR! npm v3.10.10npmERR! codeECONNREFUSEDnpmERR! errnoECONNREFUSEDnpmERR! syscall connectnpmERR!Error: connectECONNREFUSEDxxx.xxx.xx.xxx:xxxnpmERR! atObject.exports._errnoException(util.js:1022:11)npmERR!Ifyou are behind a proxy, please make sure that thenpmERR!'proxy'config is set properly.See:'npm help config'
执行下面三行代码可解决
npm config set proxy null
npm config set https-proxy null
npm config set registry http://registry.npm.taobao.org
问题五:Cannot find module 'webpack'
yarn run v1.22.18
ERROR Error: Cannot find module 'webpack'
Require stack:
- I:\project\hdemo\hdemo\node_modules\@vue\cli-service\lib\config\base.js
- I:\project\hdemo\hdemo\node_modules\@vue\cli-service\lib\Service.js
- I:\project\hdemo\hdemo\node_modules\@vue\cli-service\bin\vue-cli-service.js
Error: Cannot find module 'webpack'
Require stack:
- I:\project\hdemo\hdemo\node_modules\@vue\cli-service\lib\config\base.js
- I:\project\hdemo\hdemo\node_modules\@vue\cli-service\lib\Service.js
- I:\project\hdemo\hdemo\node_modules\@vue\cli-service\bin\vue-cli-service.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at module.exports (I:\project\hdemo\hdemo\node_modules\@vue\cli-service\lib\config\base.js:6:19)
at I:\project\hdemo\hdemo\node_modules\@vue\cli-service\lib\Service.js:82:9
at Array.forEach (<anonymous>)
at loadedCallback (I:\project\hdemo\hdemo\node_modules\@vue\cli-service\lib\Service.js:80:20)
at Service.init (I:\project\hdemo\hdemo\node_modules\@vue\cli-service\lib\Service.js:97:14)
at Service.run (I:\project\hdemo\hdemo\node_modules\@vue\cli-service\lib\Service.js:247:16)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.