0

0

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

青灯夜游

青灯夜游

发布时间:2023-01-13 17:42:29

|

2952人浏览过

|

来源于php中文网

原创

在命令行执行命令“vue init webpack vue-project”表示初始化vue项目,该命令的意思为初始化基于webpack的“vue-project”项目;其中“vue-project”是指用户自定义的项目名称,项目名不能用大写字母。

在命令行执行命令什么表示初始化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后自动在浏览器中打开页面

CA.LA
CA.LA

第一款时尚产品在线设计平台,服装设计系统

下载

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

8.png

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

9.png

4.样式

10.png

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

11.png

终端安装样式依赖:

  • 如果是 常规 的,执行 npm install stylus-loader css-loader style-loader --save-dev 安装依赖就行

  • 如果是 less 的,执行 npm install less less-loader --save-dev 安装依赖就行。

  • 如果是 sass 的,执行 npm install sass sass-loader --save-dev 安装依赖就行。或者($npm intall sass-loader --save ; $npm install node-sass --save)

安装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视频教程

相关专题

更多
node.js调试
node.js调试

node.js调试可以使用console.log()输出调试信息、断点调试和第三方调试工具。详细介绍:1、console.log()输出调试信息,通过在代码中插入console.log()语句,开发人员可以在控制台输出变量的值、函数的执行结果等信息,以便观察代码的执行流程和状态;2、断点调试,可以在代码中设置断点,以便在特定位置暂停代码的执行,观察变量的值和执行流程等。

347

2023.09.19

JavaScript 全栈开发基础(Node.js + 前端)
JavaScript 全栈开发基础(Node.js + 前端)

本专题系统介绍 JavaScript 在全栈开发中的核心知识结构,涵盖 Node.js 基础、Express/Koa 接口构建、前端交互设计、模块化与包管理、数据库连接、前后端数据通信与部署流程。通过完整项目示例,帮助学习者掌握从浏览器到服务器的一体化开发能力,实现真正意义上的全栈入门。

93

2025.11.26

json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

411

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

533

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

309

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

74

2025.09.10

css
css

css是层叠样式表,用来表现HTML或XML等文件样式的计算机语言,不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

522

2023.06.15

css居中
css居中

css居中:1、通过“margin: 0 auto; text-align: center”实现水平居中;2、通过“display:flex”实现水平居中;3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容,供大家免费下载体验。

262

2023.07.27

C++ 单元测试与代码质量保障
C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

2

2026.01.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 6.5万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 1.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号