文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

在命令行执行命令什么表示初始化vue项目

2023-05-14 22:32

关注

在命令行执行命令什么表示初始化vue项目

本教程操作环境:windows10系统、vue3版,DELL G3电脑。

VUE项目初始化步骤命令

1,安装Node.js;

Window安装包 Mac安装包
检查是否安装成功 node -v
显示版本即成功,如图:

1.png

2,安装vue-cli脚手架;

打开命令行窗口cmd(window+R,输入cmd后Enter)

在cmd下执行命令 cnpm install vue-cli -g

安装成功如图

2.png

3,初始化项目文件夹;

在你准备建项目的文件夹打开cmd 执行命令 vue init webpack vue-project(注:vue-project是自定义项目名称,项目名不能用大写字母)

如图:

3.png

初始化完成后如图:

4.png

启动项目成功如图:

5.png

成功启动后页面效果如图:

6.png

其他细节补充:

1,我所使用的命令行工具为Git,下面是最新安装包链接
Window安装包

2,地址栏中http://localhost:8081/#/ 后面的#号去除方法

编辑器打开项目,找到目录下src下router下index.js打开,改模式为 mode:‘history’ 如图:

7.png

3,启动项目后免去复制粘贴地址,即运行npm run dev后自动在浏览器中打开页面

编辑器打开项目找到config下的index.js,向下找到autoOpenBrowser: false, 第18行上下。改false为true即可。如图:

8.png

新建分支并配置路由时注意路径:

9.png

4.样式

10.png

less_loader依赖于less,两个都需安装,可在项目依赖中安装(vue ui)或终端安装;
若出现以下错误即为没有安装样式依赖。

11.png

终端安装样式依赖:

安装less-loader最新版vue项目项目提示报错: Failed to compile with 1 errors

ERROR  Failed to compile with 1 errors                                 14:20:44
 error  in ./src/components/HelloWorld.vue
Module build failed: TypeError: loaderContext.getResolve is not a function
    at createWebpackLessPlugin (D:\work\vue3.0\gcmmobile\node_modules\less-loader\dist\utils.js:31:33)
    at getLessOptions (D:\work\vue3.0\gcmmobile\node_modules\less-loader\dist\utils.js:148:31)
    at Object.lessLoader (D:\work\vue3.0\gcmmobile\node_modules\less-loader\dist\index.js:27:49)
 @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!./node_modules/less-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/HelloWorld.vue 4:14-378 14:3-18:5 15:22-386
 @ ./src/components/HelloWorld.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js1234567891011121314

则为版本问题。处理方案就是降低less-loader版本,我的vue版本是2.5.2,

先卸载最新的版本

yarn remove less-loader
npm uninstall less-loader123

安装less-loader 5.0.0版本

yarn add less-loader@5.0.0
npm install less-loader@5.0.0 -D123

5.npm ERR! code ERESOLVE:

在运行npm install时报错:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: operatingsystem@0.1.0
npm ERR! Found: vue@3.1.5
npm ERR! node_modules/vue
npm ERR!   vue@"^3.0.0" from the root project
npm ERR!12345678

控制台输入npm -V发现我的npm版本为7.x的,因为npm7.x版本对某些命令比npm6.x更严格,所以莫名报了这个错

解决办法有两种:

1)在命令后加上--legacy-peer-deps

2)使用npm6.x

提示:使用npm@6不需要卸载npm@7。可以使用npx指定npm的版本。例如:npx -p npm@6 npm i --legacy-peer-deps

如果这不能立即起作用,可以先删除node_modules和package-lock.json

相关推荐:vue.js视频教程

以上就是在命令行执行命令什么表示初始化vue项目的详细内容,更多请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯