Vue 小白课(五)——Vue3 + Vite 及 VueCLI4项目搭建

我心飞翔 分类:javascript

@Vue 小白课(五)——Vue3 + Vite 及 VueCLI4项目搭建

create by db on 2021-3-16 16:21:55
Recently revised in 2021-3-16 19:00:51

闲时要有吃紧的心思,忙时要有悠闲的趣味

 盼望着,盼望着,2020 年 9 月 ,Vuejs 3.0 发布了;2021 年 2 月,Vite 2.0 发布了。

 尤小右用实际行动告诉我们——只要学不死,就往死里学……

 没办法,撸起袖子干吧!下面我们就来看看如何用 Vue_CLI4 及 Vite 搭建 vVue 3.0 项目。

前言

Vue 3.0 简介

更新更快更强!

 Vue.js 3.0 给我们带来了那些新特性呢:

  • Performance:性能比 vue2.x 块 1.2 ~ 2 倍
  • Tree shaking support:支持按需编译,体积更小
  • Composition API:组合 API,类似 React Hooks
  • Custom Renderer API:暴露了自定义渲染 API
  • Fragment,Teleport(Protal),Suspense:新增三个组件
  • Better TypeScript support:更好的支持 TS

Vue-CLI 4 简介

让开发更简单!

 Vue-CLI 4 是 vue 官方团队推出的一款快速开发 vue 项目的构建工具,基于 Vue.js 进行快速开发的完整系统,提供:

  • 通过 @vue/cli 实现的交互式的项目脚手架。
  • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
    • 一个运行时依赖 (@vue/cli-service),该依赖:
    • 可升级;
    • 基于 webpack 构建,并带有合理的默认配置;
    • 可以通过项目内的配置文件进行配置;
    • 可以通过插件进行扩展。
  • 一个丰富的官方插件集合,集成了前端生态中最好的工具。
  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vite 简介

让项目更快!

 Vite 是一个基于 Vue3 单文件组件的非打包开发服务器,它做到了本地快速开发启动:

  • 快速的冷启动,不需要等待打包操作;
  • 即时的热模块更新,替换性能和模块数量的解耦让更新飞起;
  • 真正的按需编译,不再等待整个应用编译完成,这是一个巨大的改变。

 此笔记旨在帮助 Vue 小白了解并应用 Vue3 + Vite 及 VueCLI4 项目的命令行搭建过程,希望能帮得到大家。

 参考文献:

  • Vue3 官网

  • Vue CLI 官网

  • Vite 官网

  • TypeScript 官方文档

正文

安装相应工具

1、更新 npm 到最新版本

 Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)

 命令运行

npm install -g npm

 npm 就自动为我们更新到最新版本

 更新完成之后,以管理员身份打开 cmd 管理工具,,输入 node -v ,回车,可查看 node 版本号.

2、安装全局 Vue-CLI4.x 脚手架

 首先查看我们当前 Vue CLI 版本号,在命令行输入

vue -V

 如果出现2.X.X,则说明我们现在安装的 Vue-CLI2;

然后我们就需要更新升级了,命令行输入以下命令,回车;

npm install -g @vue/cli

 再次查看 Vue-CLI 的版本号4.x.x,则说明更新成功;

3、安装全局 Vue 3.x

 命令运行

$ npm install vue@next

Vue3 + Vue CLI 4 搭建项目

1、通过 Vue-CLI4 创建一个 vue 项目

 进入你需要创建项目的文件夹,打开命令行。

输入以下命令,回车

vue create vue3-cli4-demo

 这里vue3-cli4-demo指的是项目名,该命令执行后会创建一个名为vue3-cli4-demo的目录,也就是我们所搭建的项目。

此处有三个选择:

  • Default ([Vue 2] babel, eslint):默认套餐,使用Vue 2提供babeleslint支持
  • Default (Vue 3 Preview) ([Vue 3] babel, eslint):默认套餐,使用Vue 3,提供babeleslint支持
  • Manually select features:自己去选择需要的功能,提供更多的特性选择。比如如果想要支持 TypeScript ,就应该选择这一项。

 可以使用上下方向键来切换选项。如果只需要 babeleslint 支持,那么选择第一项,就完事了,静静等待 vue 初始化项目。

 Vue-CLI4 内置支持了 10 个功能特性,可以多选:使用方向键在特性选项之间切换,使用空格键选中当前特性,使用 a 键切换选择所有,使用 i 键翻转选项。

对于每一项的功能,此处做个简单描述:

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version              //选择vue版本,这个不选的话默认是使用vue 2
 ( ) Babel                           //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
 ( ) TypeScript                      // TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行,目前较少人再用
 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
 ( ) Router                           // vue-router(vue路由)
 ( ) Vuex                             // vuex(vue的状态管理模式)
 ( ) CSS Pre-processors               // CSS 预处理器(如:less、sass)
 ( ) Linter / Formatter               // 代码风格检查和格式化(如:ESlint)
 ( ) Unit Testing                     // 单元测试(unit tests)
 ( ) E2E Testing                      // e2e(end to end) 测试
 

我选择了 TypeScriptCSS Pre-processorsLinter / Formatter

按住enter进入下一步,接下来都是对之前每项选项的更详细的选择。

  • css:选择 SCSS/SASS

  • Linter / Formatter:选择 prettier

 这一步就是要选择配置文件的位置了。对于 Babel PostCSS 等,都可以有自己的配置文件: .babelrc.postcssrc 等等,同时也可以把配置信息放在 package.json 里面。此处出于对编辑器( Visual Studio Code )的友好支持(编辑器一般默认会在项目根目录下寻找配置文件),选择把配置文件放在外面,选择 In dedicated config files

补充

Save this as a preset for future projects?:这个就是问要不要把当前的这一系列选项配置保存起来,方便下一次创建项目时复用。选择 y。

选完之后, Vue-CLI 就根据前面选择的内容,开始初始化项目了。

 最后出现如下代码

🎉  Successfully created project vue3-cli4-demo.
👉  Get started with the following commands:

 $ cd vue3-cli4-demo
 $ npm run serve
 

 说明已经初始化成功,Vue-CLI4 已经将项目搭建完成。

2、进入你的项目文件夹

 项目搭建好了,现在就可以进入项目文件夹。

输入以下命令,回车进入新建的项目。

cd vue3-cli4-demo

3、启动项目

 一切环境依赖安装准备就绪,我们来测试一下自己新建的 vue 项目的运行情况。

输入以下命令,回车启动项目

npm run serve

结果会弹出一个浏览器访问地址默认为localhost:8080,如下:

 App running at:
  - Local:   http://localhost:8080/
  - Network: http://***.***.***.***:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.
 

 在浏览器中打开http://localhost:8080或者 Network 的地址,就能看到你的项目了

Vue-CLI4.jpg

vue ui 图形化界面创建项目

 Vue-CLI4.x 给我们同样提供了图形化界面,用来管理和创建项目

命令行输入

vue ui

然后会自动打浏览器页面:

vue-ui.png

 然后就可以按照也页面按钮一步步常见项目了。

项目打包

 在开发完项目之后,就应该打包上线了。 Vue-CLI4 也提供了打包的命令,在项目根目录下执行:

npm run build

 执行完之后,可以看到在项目根目录下多出了一个 dist 目录,该目录下就是打包好的所有静态资源,直接部署到静态资源服务器就好了。

 实际上,在部署的时候要注意,假设静态服务器的域名是 http://static.baidu.com ,那么对应到访问 <项目根目录>/dist/index.html 的 URL 一定要是 http://static.baidu.com/index.html ,其他的静态资源以此类推。

项目目录

│  .browserslistrc
│  .gitignore
│  .postcssrc.js // postcss 配置
│  babel.config.js
│  cypress.json
│  package.json // 依赖
│  README.md
│  tsconfig.json // ts 配置
│  eslint.json // eslint 配置
│  yarn.lock
│
├─public // 静态页面
│  │  favicon.ico
│  │  index.html
│  │  manifest.json
│  │  robots.txt
│  │
│  └─img
│      └─icons
│
├─src // 主目录
│  │  App.vue // 页面主入口
│  │  main.ts // 脚本主入口
│  │  registerServiceWorker.ts // PWA 配置
│  │  router.ts // 路由
│  │  shims-tsx.d.ts // 相关 tsx 模块注入
│  │  shims-vue.d.ts // Vue 模块注入
│  │  store.ts // vuex 配置
│  │
│  ├─assets // 静态资源
│  │      logo.png
│  │
│  ├─components // 组件
│  │      HelloWorld.vue
│  │
│  └─views // 页面
│          About.vue
│          Home.vue
│
└─tests // 测试用例
    ├─e2e
    │  ├─plugins
    │  │      index.js
    │  ├─specs
    │  │      test.js
    │  └─support
    │          commands.js
    │          index.js
    └─unit
            HelloWorld.spec.ts
 

Vue3 + Vite 搭建项目

1、通过 Vite 创建一个 vue 项目

 进入你需要创建项目的文件夹,打开命令行。

输入以下命令,回车

npm init @vitejs/app vue3-vite-demo

 这里vue3-vite-demo指的是项目名,该命令执行后会创建一个名为vue3-vite-demo的目录,也就是我们所搭建的项目。

此处可以选择支持的模板,包括:

? Select a template: ...
> vanilla
  vue
  vue-ts
  react
  react-ts
  preact
  preact-ts
  lit-element
  lit-element-ts
 

 可以使用上下方向键来切换选项。使用Enter来确定模板,就完事了,静静等待 vue 初始化项目。

我选择了 vue-ts

按住enter进入下一步,

 最后出现如下代码

√ Select a template: · vue-ts

Done. Now run:

  cd vue3-vite-demo
  npm install
  npm run dev
 

 说明已经初始化成功,vue3-vite-demo 项目搭建完成。

2、进入你的项目文件夹

 项目搭建好了,现在就可以进入项目文件夹。

输入以下命令,回车进入新建的项目。

cd vue3-vite-demo

3、安装依赖

 因为各个模板之间都是相互依赖的,所以现在我们要安装依赖。

输入以下命令,回车安装依赖

npm install

4、启动项目

 一切环境依赖安装准备就绪,我们来测试一下自己新建的 vue 项目的运行情况。

输入以下命令,回车启动项目

npm run dev

结果会弹出一个浏览器访问地址默认为localhost:3000,如下:

vite v2.1.0 dev server running at:

> Network:  http://***.***.***.***:3000/
> Local:    http://localhost:3000/

ready in 885ms.
 

 在浏览器中打开http://localhost:3000或者 Network 的地址,就能看到你的项目了

vue-vite.jpg

 一个由 Vite 构建的 Vue3 项目就搭建好了,支持 TypeScript 语法,CSS 预处理器为 Sass,使用 ESLint 和 prettierrc 风格格式化代码

Tips:安装新依赖请添加【–save】:

  npm i xxx --save
  // 或
  cnpm i xxx --save
  // 或
  yarn add xxx --save
  // --save不写的话,新的依赖文件不会写进package.json文件中
 

项目目录

|-node_modules        -- 项目依赖包的目录
|-public              -- 项目公用文件
  |--favicon.ico      -- 网站地址栏前面的小图标
|-src                 -- 源文件目录,程序员主要工作的地方
  |-assets            -- 静态文件目录,图片图标,比如网站logo
  |-components        -- Vue3.x的自定义组件目录
  |--App.vue          -- 项目的根组件,单页应用都需要的
  |--index.css        -- 一般项目的通用CSS样式写在这里,main.ts引入
  |--main.ts          -- 项目入口文件,SPA单页应用都需要入口文件
|--.gitignore         -- git的管理配置文件,设置那些目录或文件不管理
|-- index.html        -- 项目的默认首页,Vue的组件需要挂载到这个文件上
|-- package-lock.json --项目包的锁定文件,用于防止包版本不一样导致的错误
|-- package.json      -- 项目配置文件,包管理、项目名称、版本和命令
|-- tsconfig.json     -- TypeScript配置文件,主要包含指定待编译文件和定义编译选项。
|-- vite.config.ts    -- vite总配置文件
 

总结

 至此,我们的 Vue3.0 项目就搭建完成了。万里长征第一步,加油!

 如需进一步了解关于 vue 的基础知识,请戳

  • Vue 小白课(一)——CLI 搭建项目(Vue2.x)
  • Vue 小白课(二)——项目结构解析(Vue2.x)
  • Vue 小白课(三)——CLI 搭建项目(Vue CLI 3.x)
  • Vue 小白课(四)——项目结构解析(Vue CLI 3.x)

 路漫漫其修远兮,与诸君共勉。

后记:Hello 小伙伴们,如果觉得本文还不错,记得点个赞或者给个 star,你们的赞和 star 是我编写更多更丰富文章的动力!GitHub 地址

知识共享许可协议
db 的文档库 由 db 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于github.com/danygitgit上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。

回复

我来回复
  • 暂无回复内容