在window下创建一个新的vue.js项目(vue2非vue3)

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.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容