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项目
提前剧透下vue默认配置和手动配置生成项目文件夹的差别。
现在知道了手动设置提供了更多的可选模块(Eslint、Css预处理器,Vuex、Router),因为它们是面向生产的项目更加需要的,所以本项目采用手动配置。现在通过上下键选中第三个 按下回车,开始创建。
选择要配置的模块
接下来按空格来选择,推荐下面这样选则
选择3.X
接下来按下图的结果一样选中
是否使用class的component 输入n;
是否使用bable 来处理typescript 输入y;
按自己习惯安装css与处理器;
按照你习惯的风格安装ESLint我选择的是Prettier;
选择在保存的时候进行esLint;
将babel eslint 配置生成单独的文件选择第一个; 最后一个选择no
回车即可创建Vue3.0项目 之前选择的东西会默认配置好。
启动项目
进入文件夹 启动项目 npm run serve 即可访问 如图说明创建成功
项目结构如下图
到这里Vue3.0的项目就创建完了,就可以愉快的尝试起来使用vue3的新语法了😝。 也可以跟这下面👇🏻的系列继续和我一起学习哦~😉