八、vue-cli搭建vue3项目

VUE3

https://v3.cn.vuejs.org/guide/installation.html

使用 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? - 直接回车
    八、vue-cli搭建vue3项目_第1张图片

启动项目 yarn serve或者npm run serve

>yarn serve

启动成功

八、vue-cli搭建vue3项目_第2张图片

项目结构:

八、vue-cli搭建vue3项目_第3张图片

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 基础模板,也是打包编译后的项目入口

八、vue-cli搭建vue3项目_第4张图片

main.ts

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

tsconfig.json

ts配置文件
https://v3.cn.vuejs.org/guide/typescript-support.html#typescript-%E6%94%AF%E6%8C%81

八、vue-cli搭建vue3项目_第6张图片

vue-router

与vue2相比内容也发生了点改变

大致就是

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

八、vue-cli搭建vue3项目_第7张图片

.vue文件

和vue2相比

你可能感兴趣的:(typescript,vue.js,typescript,javascript)