Vue3 + Vue CLI 项目搭建

了解Vue和Vue CLI及其关系

Vue3文档-vuejs

  • Vue核心功能:数据绑定

Vue CLI文档

  • Vue CLI = Vue.js + 一堆组件

创建Vue CLI项目

淘宝镜像

1
2
npm get registry  --显示当前的镜像网址
npm config set registry http://registry.npm.taobao.org -- 使用淘宝的镜像网址

安装Vue CLI

1
npm install -g @vue/cli@4.5.9

创建web应用

1
vue create web

新创建项目选择Manually select features
启动web应用
使用npm窗口启动

选择配置如下:

1
2
3
4
5
6
7
8
9
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: wiki

升级Vue CLI时,已创建好的应用不受影响。

Vue CLI项目结构解析

  • index.htmlmain.tsapp.vue三者关联

  • publicassets两个静态资源文件的引用方法

    • public不参与打包
    • assets会被打包
  • index.html引入外部静态文件用<%=BASE_URL %>

  • 子文件里的.gitgnore文件是会生效的,里面配置的文件规则,是相对当前.gitgnore文件所在位置

  • README.md只有根目录下的生效

  • package.json作用类似于pom.xml

  • eslintrc.js是一把双刃剑

  • Vue CLI需要编译才能发布

集成Ant Design Vue

Ant Design Vue:https://2x.antdv.com/docs/vue/introduce-cn/
集成Ant Design Vue

1
npm install ant-design-vue@2.0.0-rc.3 --save

网站首页布局开发

  • Ant Design Vue布局
  • router-view的用法,相当于一个界面占位符
  • router-link to的用法,用于页面跳转

制作Vue自定义组件

  • 将公共的代码块提取成组件,方便维护
  • 怎么制作自定义组件

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!