vue初始化（命令行方式）

最新推荐文章于 2024-04-29 18:03:21 发布

清华小菜

最新推荐文章于 2024-04-29 18:03:21 发布

阅读量9.4k

点赞数 5

分类专栏：笔记文章标签： vue.js 前端 javascript

原文链接：https://blog.csdn.net/weixin_45264991/article/details/103802939

版权

笔记专栏收录该内容

57 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue项目的初始化步骤，包括安装Node.js、Vue脚手架、创建项目及启动项目。讲解了如何修改路由、去除URL中的#号、自动打开浏览器及处理样式问题。特别提到了在遇到less-loader版本问题时的解决办法，以及npm7.x版本可能出现的依赖解析错误及其解决方案。

摘要由CSDN通过智能技术生成

VUE项目初始化步骤命令
1，安装Node.js;
Window安装包 Mac安装包
检查是否安装成功 node -v
显示版本即成功，如图：
在这里插入图片描述

2，安装vue-cli脚手架；
打开命令行窗口cmd（window+R,输入cmd后Enter）
在cmd下执行命令 cnpm install vue-cli -g
安装成功如图
在这里插入图片描述

3，初始化项目文件夹；

在你准备建项目的文件夹打开cmd 执行命令 vue init webpack vue-project(注：vue-project是自定义项目名称)
如图：

初始化完成后如图：
在这里插入图片描述

启动项目成功如图：
在这里插入图片描述

成功启动后页面效果如图（终端运行vue ui打开）：
在这里插入图片描述

以上步骤三也可选择通过PowerShell进行（使用PowerShell在进行上下选择是更方便且页面更简洁），打开PowerShell可通过打开你项目所在的文件夹，然后按shift+右键打开。
在这里插入图片描述
上述初始化后项目中有很多文件，其中部分文件可进行修改。
node_modules文件夹存放的是项目依赖包，src中即为我们书写的代码，其中assets为静态文件（图片和css文件等），component为组件文件，router制定路由规则。
可对component和router进行修改：
在这里插入图片描述
对App.vue进行修改：

如此以后我们就可以得到一个空白的网页啦！！

其他细节补充：
1，我所使用的命令行工具为Git
2，地址栏中http://localhost:8081/#/ 后面的#号去除方法
编辑器打开项目，找到目录下src下router下index.js打开，改模式为 mode:‘history’ 如图：
在这里插入图片描述

3，启动项目后免去复制粘贴地址，即运行npm run dev后自动在浏览器中打开页面
编辑器打开项目找到config下的index.js，向下找到autoOpenBrowser: false, 第18行上下。改false为true即可。如图：
在这里插入图片描述
新建分支并配置路由时注意路径：

4.样式

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

终端安装样式依赖：

如果是 常规 的，执行 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.js

则为版本问题。处理方案就是降低less-loader版本,我的vue版本是2.5.2，
先卸载最新的版本

yarn remove less-loader

npm uninstall less-loader

安装less-loader 5.0.0版本

yarn add less-loader@5.0.0

npm install less-loader@5.0.0 -D

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!

控制台输入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

版权声明：本文为CSDN博主「许魁」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45264991/article/details/103802939