分享更有价值
被信任是一种快乐

初始化vue项目的过程 是什么

文章页正文上

本篇内容主要讲解“初始化vue项目的过程 是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“初始化vue项目的过程 是什么”吧! 在命令行执行命令“vue init webpack vue-project”表示初始化vue项目,该命令的意思为初始化基于webpack的“vue-project”项目;其中“vue-project”是指用户自定义的项目名称,项目名不能用大写字母。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是自定义项目名称,项目名不能用大写字母)如图:初始化完成后如图:启动项目成功如图:成功启动后页面效果如图:其他细节补充:1,我所使用的命令行工具为Git,下面是最新安装包链接
Window安装包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

ERRORFailedtocompilewith1errors14:20:44
errorin./src/components/HelloWorld.vue
Modulebuildfailed:TypeError:loaderContext.getResolveisnotafunction
atcreateWebpackLessPlugin(D:workvue3.0gcmmobilenode_modulesless-loaderdistutils.js:31:33)
atgetLessOptions(D:workvue3.0gcmmobilenode_modulesless-loaderdistutils.js:148:31)
atObject.lessLoader(D:workvue3.0gcmmobilenode_modulesless-loaderdistindex.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.vue4:14-37814:3-18:515:22-386
@./src/components/HelloWorld.vue
@./src/router/index.js
@./src/main.js
@multi(webpack)-dev-server/client?http://localhost:8080webpack/hot/dev-server./src/main.js1234567891011121314

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

yarnremoveless-loader
npmuninstallless-loader123

安装less-loader 5.0.0版本

yarnaddless-loader@5.0.0
npminstallless-loader@5.0.0-D123

5.npm ERR! code ERESOLVE:在运行npm install时报错:

npmERR!codeERESOLVE
npmERR!ERESOLVEunabletoresolvedependencytree
npmERR!
npmERR!Whileresolv免费云主机、域名ing:operatingsystem@0.1.0
npmERR!Found:vue@3.1.5
npmERR!node_modules/vue
npmERR!vue@"^3.0.0"fromtherootproject
npmERR!12345678

控制台输入npm -V发现我的npm版本为7.x的,因为npm7.x版本对某些命令比npm6.x更严格,所以莫名报了这个错解决办法有两种:1)在命令后加上–legacy-peer-deps2)使用npm6.x提示:使用npm@6不需要卸载npm@7。可以使用npx指定npm的版本。例如:npx -p npm@6 npm i –legacy-peer-deps如果这不能立即起作用,可以先删除node_modules和package-lock.json到此,相信大家对“初始化vue项目的过程 是什么”有了更深的了解,不妨来实际操作一番吧!这里是云技术网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

相关推荐: es6如何声明只读常量

今天小编给大家分享一下es6如何声明只读常量的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。 在es6中,可以使用const关键字来声明只读常量,…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册