小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

VUE3

v3.cn.vuejs.org/guide/insta…

使用 vue-cli 创建

对于 Vue 3，你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli。

yarn global add @vue/cli
# 或
npm install -g @vue/cli

查看版本：vue --version

E:\mysjc> vue --version
      @vue/cli 4.5.13
E:\mysjc>

开始搭建项目

vue create 项目名称

Please pick a preset - 选择 Manually select features
Check the features needed for your project - 选择上 TypeScript ，特别注意点空格是选择，点回车是下一步
Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)
Use class-style component syntax - 直接回车
Use Babel alongside TypeScript - 直接回车
Pick a linter / formatter config - 直接回车
Use history mode for router? - 直接回车
Pick a linter / formatter config - 直接回车
Pick additional lint features - 直接回车
Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
Save this as a preset for future projects? - 直接回车

启动项目 yarn serve或者npm run serve

>yarn serve

启动成功

项目结构：

vue.config.js

进入项目目录发现没有 vue.config.js,手动创建一个和package.json同级

vue.config.js配置



// const proxyConfig =
//   process.env.NODE_ENV === "production"
//     ? require("./proxy.pro.config")
//     : require("./proxy.dev.config");


module.exports = {
  assetsDir: "static",
  runtimeCompiler: true,

  devServer: {
    host: "0.0.0.0",
    // 端口号
    port: 8080,
    https: false,
    // https:{type:Boolean}
    //配置自动启动浏览器
    open: true,
    //热更新
    hot: true,
    //配置多个跨域
    proxy: { }
    // proxy: proxyConfig.proxyList,
  },

};

如果遇到options.proxy should be {Object|Array}错误,将

proxy:{}

改为

proxy:null

public文件夹

项目中有一个 public 文件夹，可以存放一些不需要经过 webpack 打包的文件

该目录下有一个 index.html 文件，这是整个应用的 html 基础模板，也是打包编译后的项目入口

main.ts

src 目录下的 main.ts文件,注意这里已经成为ts并不是vue2中的js, 是webpack 打包的入口文件,如下图所示 createApp 方法是 Vue 3 新增的全局 API，用来创建一个 Vue 应用，并挂载到#app 节点

tsconfig.json

ts配置文件 v3.cn.vuejs.org/guide/types…

vue-router

与vue2相比内容也发生了点改变
大致就是

定义一些路由
创建路由实例并传递 routes 配置
HTML5 history 模式
最后在main.tz 中使用 next.router.vuejs.org/zh/introduc…

.vue文件

和vue2相比

<script> 标签上声明 lang="ts",使用typescript语言
使用defineComponent 来定义组件

八、vue-cli搭建vue3项目