最近准备做一个vue的小项目关于vue3的使用。

  首先在vscode全局安装vue脚手架,npm i -g @vue/cli。

  然后创建vue项目,vue create mydemo(项目名)。

  接下来就是选择一些安装的事项

  

  这里推荐选择自定义安装,选择如下几个(如果会用typescript就把这个也勾上),

  选择的方法是移动到选择项,按空格即可。

  

  然后选择css预处理。

  

  编码风格根据个人习惯选择,选择eslint能够更好的让你的代码规范,刚开始会非常不适应各种报错。

  

  这2个都选上。

  

  包的配置选择单独存放一个文件。

  

  记得全局安装yarn,  npm i -g yarn,yarn对比npm和cnpm有如下2点好处:

  1.yarn安装依赖不会存在丢包问题,npm和cnpm偶尔丢包;

  2.yarn在安装依赖的时候会进行缓存,而npm和cnpm则不会。例如在安装依赖的时候因网络原因或者误操作将vscode关闭等等,在下一次安装的时候,yarn会从之前已经下载好的地方继续下载,而npm和cnpm则会将之前的删除重新下载。

  接下来将命令移动到刚刚创建的项目中 cd mydemo。

  然后就可以跑起你的项目了。 yarn serve。

  vue3对比vue2的版本:在运行项目时会出现2个端口,1个本地端口,另1个是服务器端口,这时候如果旁边还有一台电脑,可通过服务器端口进行访问。  

  

  这就是一个完整的创建vue3的项目的过程了。

  记:第一个博客,路上成长,但愿长久~

  

创建vue3项目的更多相关文章

  1. vite创建vue3项目 vueconfig配置及其备注

    import vue from '@vitejs/plugin-vue' const path = require('path') // vite.config.js # or vite.config ...

  2. vue3环境搭建以及创建简单项目。

    1.环境准备,以下都是我的版本.自己在官网上面下载需要的版本. 尝试了Python3.7.3在创建vue3项目时出现问题. node.js10.16.0, python2.7.16, yarn1.16 ...

  3. Vue CLI 5 和 vite 创建 vue3.x 项目以及 Vue CLI 和 vite 的区别

    这几天进入 Vue CLI 官网,发现不能选择 Vue CLI 的版本,也就是说查不到 vue-cli 4 以下版本的文档. 如果此时电脑上安装了 Vue CLI,那么旧版安装的 vue 项目很可能会 ...

  4. 基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)

    vite 最近非常火,它是 vue 作者尤大神发布前端构建工具,底层基于 Rollup,无论是启动速度还是热加载速度都非常快.vite 随 vue3 正式版一起发布,刚开始的时候与 vue 绑定在一起 ...

  5. 开箱即用 yyg-cli(脚手架工具):快速创建 vue3 组件库和vue3 全家桶项目

    1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...

  6. Vue(1):用Vue-cli构建Vue3项目

    使用Vue-cli构建Vue3项目 1.检查node版本 node -v 以上node版本位14.15.0满足Vue3项目的创建条件(Vu3需要node 版本8以上) 为什么需要安装node? vue ...

  7. 《Asp.Net Core3 + Vue3入坑教程》 - Vue 1.使用vue-cli创建vue项目

    简介 <Asp.Net Core3 + Vue3入坑教程> 此教程适合新手入门或者前后端分离尝试者.可以根据图文一步一步进操作编码也可以选择直接查看源码.每一篇文章都有对应的源码 目录 & ...

  8. vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶项目续篇

    在<基于 vite 创建 vue3 全家桶>一文整合了 Element Plus,并将 Element Plus 中提供的图标进行全局注册,这样可以很方便的延续 Element UI 的风 ...

  9. 从零搭建基于webpack的Electron-Vue3项目(1)——基于webpack的Vue3项目搭建

    从零搭建基于webpack的Electron-Vue3项目(1)--基于webpack的Vue3项目搭建 前言 本篇文章内容,主要是基于webpack的Vue3项目开发环境进行搭建,暂时还不涉及到El ...

随机推荐

  1. Python线程与进程 I/O多路复用

    SSHClient Paramiko模块 远程执行命令 #用户名密码方式: import paramiko ssh = paramiko.SSHClient() ssh.set_missing_hos ...

  2. 教你如何用Python向手机发送通知

    ------------恢复内容开始------------ 你曾想尝试在服务器端或电脑上向手机发送通知吗? 你曾烦恼过企业邮箱的防骚扰机制吗? 现在,我们可以用一种简单轻松的方法来代替企业邮箱了! ...

  3. JS基础语法---函数练习part2---10个综合练习(运用:循环/数组/函数)

    练习1:求2个数中的最大值 function getMax(num1, num2) { return num1 > num2 ? num1 : num2; } console.log(getMa ...

  4. leaflet-webpack 入门开发系列二加载不同在线地图切换显示(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  5. Linux下用户管理:删除用户

    基本语法: userdel 用户名 但是我们在删除用户的时候很显然需要利用root用户权限来进行删除才是可以的.但是利用这种方法进行删除的话是会保留家目录的,意思是该用户所对应的家目录不会被删除. 不 ...

  6. Python—虚拟环境的创建与管理(virtualenv与virtualenvwrapper)

    virtualenv 1.安装virtualenv包 [root@localhost ~]# pip install virtualenv 2.创建虚拟环境,位置不固定,可以在项目的目录下,也可以不在 ...

  7. CentOS 7 Apache 绑定域名和网站

    CentOS 7 Apache 绑定域名和网站适用场景一台服务器,运行有多个网站,每个网站都希望用户直接通过二级域名来访问,而不是同一个域名通过子目录来访问 配置过程确定自己的 Apache 服务器的 ...

  8. Shell命令-用户用户组管理之visudo、sudo

    文件及内容处理 - visudo.sudo 1. visudo:编辑/etc/sudoers文件的专属命令 visudo命令的功能说明 visudo命令专门用来编辑/etc/sudoers这个文件的. ...

  9. CodeForces - 1255C(构造+模拟)

    题意 https://vjudge.net/problem/CodeForces-1255C 一个长度为n的序列,给你n-2个三元组,比如p=[1,4,2,3,5],那么三元组为[1,4,2],[4, ...

  10. Java学习笔记(2)--- 对象和类入门,java包,this 和 super区别

    1.对象和类(Object and class): 一个 Java 程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作. 面对对象编程是java非常重要的一部分,作者本身之前学过c ...