项目地址 gitee.com/fe521/vue3-…

vue3.0

vue3.0 文档 https://vue-composition-api-rfc.netlify.app/zh/

vuex4.0 文档 https://github.com/vuejs/vuex/releases

创建项目

# 更新 vue-cli 我的 @vue/cli 4.3.1
npm install -g @vue/cli

# 创建文件夹
mkdir vue3-demo && cd vue3-demo

# 创建项目 把项目创建到当前目录
vue craete .

# 启动项目
npm run serve

# 创建 .npmrc文件
touch .npmrc

.npmrc 文件内容

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
registry=https://registry.npm.taobao.org

安装 vue3.0 插件

vue add vue-next

PS G:\project\vue3-demo> vue add vue-next
 WARN  There are uncommited changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes

📦  Installing vue-cli-plugin-vue-next..

eslint 报错

第一个报错

Failed to load config "plugin:vue/essenti al" to extend from.

module.exports = {
    extends: [
        // 'plugin:vue/vue3-essential',
        'eslint:recommended',
        '@vue/standard'
    ]
};

第二个报错

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tageslint

module.exports = {
    extends: ['plugin:vue/vue3-essential', 'standard']
};

格式化文档

1. vscode 安装 Prettier - Code formatter插件

2. 项目根目录创建 prettier.config.js 文件

touch prettier.config.js

1. prettier.config.js 文件内容

/**
 * @file 解决使用 vscode 配置 prettier 不生效问题
 * @author lishaohai
 */

// 官网地址 https://prettier.io/docs/en/configuration.html

// 比较好的文章：https://juejin.cn/post/6844903832485363720

// 浅谈如何用 VS Code 舒服地编码：https://www.jianshu.com/p/25b87bc8d36a

// Prettier格式化配置（推荐）：https://www.cnblogs.com/oneweek/p/11236515.html

module.exports = {
    trailingComma: 'none', // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
    tabWidth: 4, // 缩进字节数
    semi: true, // 句尾添加分号
    singleQuote: true, // 使用单引号代替双引号
    proseWrap: 'never',
    printWidth: 120, // 超过最大值换行
    bracketSpacing: false, // 对象紧贴花括号部分不允许包含空格
    jsxSingleQuote: false, // 在jsx中使用单引号代替双引号
    arrowParens: 'avoid', //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
    space_after_anon_function: true,
    space_after_named_function: true
};

1. 重启 vscode