当前位置:首页 > vue > 正文内容

vue项目的创建

xi7年前 (2020-02-14)vue1634

安装node

1、检查node,未安装在这里(https://nodejs.org/dist/v16.14.0/node-v16.14.0-x64.msi )下载最新版安装。
2、检查npm,node自带npm但不是最新版本,需要命令更新:npm install -g npm

安装vue脚手架

1、在国内下载时网络会出问题,建议淘宝镜像下载,配置镜像:npm install -g cnpm –registry=https://registry.npm.taobao.org
2、用cnpm安装vue脚手架:cnpm i -g @vue/cli(其中i是Install安装的简写,g是global全局的简写)。

创建vue项目

1、使用脚手架创建vue项目:vue create test(test为项目名)
2、选择第三项自定义添加:

Default([Vue 3] babel, eslint):vue3的项目,只包含js编译器babel,代码检测工具eslint。
Default([Vue 2] babel, eslint):vue2的项目,只包含js编译器babel,代码检测工具eslint。
Manually select features:自定义添加选择功能。
3、选择配置,一般项目勾选下图选项即可:

Babel:js编译器
Typescript:js的超集
Progressive Web App Support:渐进式的网页应用程序
Router: vue的路由
Vuex: vue的状态管理
CSS Pre-processors: css的预处理器
Linter/Formatter:代码风格检测与格式化(如果自己代码不是很规范的话可以用这个约束下自己,也可不选择,按照自己的风格)
Unit Testing:单元测试
E2E Testing:端对端测试
4、选择vue3(按照自己需求来)

5、路由采用history模式,输入y:

6、选择第一项CSS预处理器:

7、选择第三个标准配置:

8、选择第一个,编写代码时提示错误:

9、Babel、ESLint 等的配置存放选择都存放在package.json中,选择第二项:

10、保存设置为demo,下次再次创建项目时便会多出一个demo选项,不需再次配置即可直接使用:

11、敲击回车等待后创建完成:

启动项目

1、cd到项目目录下:cd test,输入启动命令:npm run serve
2、打开链接即可启动项目:

扫描二维码推送至手机访问。

版权声明:本文由曦的博客发布,如需转载请注明出处。

本文链接:http://xiblogs.top:1111/?id=21

“vue项目的创建” 的相关文章

vue动态绑定样式

vue动态绑定样式

每次点击方块时通过三元表达式,改变对应的class,每一个不同的class对应不同的样式,从而通过改变class实现样式的切换。 <template> <div class="container"> <!--通过三元表达式选择cla...

vscode使用vue代码模板

vscode使用vue代码模板

1、vscode中打开:文件>首选项>用户片段>输入vue按下回车2、复制下面代码并保存。 { "Print to console": { "prefix": "vue",...

canvas实现图片标记

canvas实现图片标记

前言由于业务需求,需要有一个图片标记功能,其实就是对图片画框画线做标记,类似微信的图片编辑但是需要存下标记图及其标记的具体数据,。功能其实很简单,但刚开始的时候也是费了一些功夫的。我将原项目中该功能抽离出来单独写了一个demo,作为记录,同时你们在开发过程中有类似需求的话也可以参考一下该思路,其中有...

DataV兼容vue3的方法

DataV兼容vue3的方法

发现问题在使用vue开发大屏时,发现了一个很好用的可视化组件库DataV(http://datav.jiaminghi.com/ ),不是阿里那个DataV哈,用vue2开发时都一切顺利,直到有一天升级项目到vue3时,发现一堆报错,后面查了下,好像是DataV不兼容vue3,而vue3版本的Dat...

vue导出word文档

vue导出word文档

具体需求在我的项目中有一个功能需要导出word文档,在页面点击按钮后处理数据生成word文件,然后自动下载文档。 实现步骤 多番查询后发现前端导出word,使用docxtemplater(https://docxtemplater.com/ )较为方便。具体使用步骤如下: 安装docxte...

vue3实现一个抽奖小项目

vue3实现一个抽奖小项目

前言 在公司年会期间我做了个抽奖小项目,我把它分享出来,有用得着的可以看下。浏览链接:https://xiblogs.top/original/other/luckDraw/index.html项目链接:https://gitee.com/xi1213/luck-draw (欢迎star!)项目截...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。