Vue3系列:搭建Vue3项目

1,766 阅读2分钟

Vue3.0 系列之Vue3.0安装教程

通过本系列 可带你初步体验Vue3.0及其生态

系列文章:

前言


实验环境 node14.0.0,建议安装nvm 来管理 node 版本

安装vue3 需要脚手架 VueCLI 3+

通过vue -V查看当前版本 通过 vue create project-name 创建vue3项目

如果提示:upgrade to Vue CLI 3:执行以下命令升级脚手架后在创建项目

npm uninstall -g vue-cli
npm install -g @vue/cli

再次执行vue create project-name 可看到以下提示

选择手动配置

1. 创建默认模板的vue2项目
2. 创建默认模板的vue3项目
3. 手动设置vue项目

image.png

提前剧透下vue默认配置和手动配置生成项目文件夹的差别。

image.png

现在知道了手动设置提供了更多的可选模块(Eslint、Css预处理器,Vuex、Router),因为它们是面向生产的项目更加需要的,所以本项目采用手动配置。现在通过上下键选中第三个 按下回车,开始创建。

选择要配置的模块

接下来按空格来选择,推荐下面这样选则

image.png

选择3.X

image.png

接下来按下图的结果一样选中

是否使用class的component 输入n; 
是否使用bable 来处理typescript 输入y; 
按自己习惯安装css与处理器; 
按照你习惯的风格安装ESLint我选择的是Prettier;
选择在保存的时候进行esLint; 
将babel eslint 配置生成单独的文件选择第一个; 最后一个选择no

image.png

回车即可创建Vue3.0项目 之前选择的东西会默认配置好。

启动项目

进入文件夹 启动项目 npm run serve 即可访问 如图说明创建成功

image.png

项目结构如下图

image.png

到这里Vue3.0的项目就创建完了,就可以愉快的尝试起来使用vue3的新语法了😝。 也可以跟这下面👇🏻的系列继续和我一起学习哦~😉

结尾