vue3.0项目快速搭建的完整步骤记录
目录
- 一、我们要确保vue/cli版本在4.5.0以上，才能更好的支持3.0
- 二、通过vue/cli3创建我们的第一个项目
- Router
- CSS 预编译
- ESLint 语法校验
- 运行项目
- 升级vue
- 三、vue3.0相比vue2.0改进和新特性
- 总结
一、我们要确保vue/cli版本在4.5.0以上，才能更好的支持3.0
//安装最新vue/cliyarn global add @vue/cli //或npm install -g @vue/cli
用
vue -V查看安装的版本号检验是都成功安装。
文章图片
二、通过vue/cli3创建我们的第一个项目
vue create my-project
文章图片
? Please pick a preset: (Use arrow keys) default (babel, eslint)// 默认选项 Manually select features//手动选择功能
很显然以上两个选择都是Default默认选项，第一步我们选择手动自定义选项
文章图片
? Please pick a preset: Manually select features? Check the features needed for your project: (Pressto select,to toggle all, to invert selection)>( ) Babel//代码编译( ) TypeScript//ts( ) Progressive Web App (PWA) Support//支持渐进式网页应用程序( ) Router//vue路由( ) Vuex//状态管理模式( ) CSS Pre-processors//css预处理( ) Linter / Formatter//代码风格、格式校验( ) Unit Testing//单元测试( ) E2E Testing//端对端测试
这一步我们根据我们的项目需要去选择我们需要的一些配置，a全选,空格单选，在我们需要的配置项敲空格即可，选完之后回车确认
Router
文章图片
路由是否使用history模式,根据项目需求选择
CSS 预编译
文章图片
这一步我选择的是node-sass预处理类型，根据自己项目需求去选择css预编译类型
ESLint 语法校验
文章图片
? Pick a linter / formatter config: (Use arrow keys)> ESLint with error prevention only//只进行报错提醒ESLint + Airbnb config//不严谨模式ESLint + Standard config//正常模式ESLint + Prettier//严格模式TSLint (deprecated)//TypeScript格式验证工具
这一步也可根据项目需求自行选择
文章图片
? Pick additional lint features: (Pressto select,to toggle all, to invert selection)>(*) Lint on save// 保存时检测 ( ) Lint and fix on commit// 修复和提交时检测
选择校验模式，我选择了保存时做校验，也推荐大家选择保存的时候去做校验，也能及时的修改一些语法提示，比较方便去做语法调整
文章图片
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)> In dedicated config files//存放在专用配置文件中In package.json//存放在package.json中
选择Babel, ESLint等自定义配置的存放位置。这里建议大家选择第一个
文章图片
是否保存当前选择的配置项，如果当前配置是经常用到的配置，建议选择y存储一下当前配置项。
文章图片
运行项目
到这一步我们的项目就已经搭建好了根据提示，我们运行一下项目。
cd may-projectyarn serve
文章图片
文章图片
升级vue
项目已经跑起来了，这里我们要敲黑板了，如果现在我们直接用3.0的语法去开发的话，会出现一个问题，
{{msg}}
我们直接渲染msg页面会一直给我们报错说，msg变量没有初始化
文章图片
到这里我们不急，在看一下package.json,查看一下vue的版本，为什么不支持3.0的语法，结果问题还真在这里
文章图片
果然还是2.xx的版本号，那么我们升级一下版本
vue add vue-next升级完之后我们在看一下package.json，果然已经是3.0.0-beta.1版本
文章图片
升级好，这下我们在
yarn serve在运行一下我们的项目
文章图片
果然现实总是啪啪的打脸，还是没跑起来，我们根据报错去看一下min.js
import {createApp} from 'vue'import App from './App.vue'import './registerServiceWorker'import router from './router'import store from './store'createApp(App).use(router).use(store).mount('#app')
【vue3.0项目快速搭建的完整步骤记录】我们稍作调整，不出所料我们的项目已经正常运行了！我们定义的msg字符串也渲染到了页面上。
文章图片
到此我们就跑通了我们的第一个vue3的项目
三、vue3.0相比vue2.0改进和新特性 1.相比于vue2.0，性能有了明显的提升；（据作者透露有了30%-300%的性能提升）
2.相比于vue2.0，打包体积明显的缩小；采用Tree-shaking support将无用模块剪辑，仅打包需要的，大大降低了打包的体积；
3.暴露了自定义渲染api，增加了可扩展性；
4.底层完全采用typescript重写，可以很好的支持ts；
5.新特性：增加组合式api（ composition-api ），是我们可以以一种低侵入式的，更灵活的组合组件的逻辑；
总结 到此这篇关于vue3.0项目快速搭建的文章就介绍到这了,更多相关vue3.0项目快速搭建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
推荐阅读
- 17|17 关山松 第二课作业#公众号项目# D20
- RxJava|RxJava 在Android项目中的使用（一）
- Hacking|Hacking with iOS: SwiftUI Edition - SnowSeeker 项目（一）
- 靠QQ月入上万灰色暴利偏门的项目
- spring|spring boot项目启动websocket
- vuex|vuex 基础结构
- neo4j|neo4j cql语句 快速查询手册
- 区块链开发平台（以太坊）
- 如何在手机上查看测试vue-cli构建的项目
- django2.2|django2.2 一般项目步骤（初步）