从创建一个vue3项目到跑起来!!

        一.使用 create-vue 脚手架创建项目。

        

1. 执行创建命令。

        

pnpm create vue
# or
npm init vue@latest
# or
yarn create vue

        

     2.选择项目依赖内容。

✔ Project name: … v3-project
✔ Add TypeScript? … No / `Yes`
✔ Add JSX Support? … `No` / Yes
✔ Add Vue Router for Single Page Application development? … No / `Yes`
✔ Add Pinia for state management? … No / `Yes`
✔ Add Vitest for Unit Testing? … `No` / Yes
✔ Add Cypress for both Unit and End-to-End testing? … `No` / Yes
✔ Add ESLint for code quality? … No / `Yes`
✔ Add Prettier for code formatting? … No / `Yes`

Scaffolding project in /Users/zhousg/Desktop/patient-h5-100...

Done. Now run:

  cd patient-h5-100
  pnpm install
  pnpm lint
  pnpm dev

这里选择了一些基本配置

例如TS,vue Router,Pinia等待,根据需要自己选择,一个开始学习vue3可以不把Ts加入进去

这个第二项JSX是

 JSX=javascript xml就是Javascript和XML结合的一种格式。是 JavaScript 的语法扩展，

表示在JavaScript中编写XML格式代码（也就是HTML格式）

我在项目中接触的很少,所以不是很了解,不过有兴趣的小伙伴可以搜索学习一下.

然后就是插件,一般写vue3用的插件就是

 记住一定要把vue2的这个插件给停用掉,不然语法上的不同会不断地有提示报错

         然后还有一些其他要注意的点,但是暂时没想到.主要集中在eslint上,有碰到报错的可以第一时间先看项目能不能跑,如果能跑,浏览器也没报错,说明肯定是eslint的设置有问题,去看看能不能配置强制忽略.

ESLint 基本的配置

        修改.eslintrc.cjs文件，补充配置项

{
    rules: {
        'prettier/prettier': [
            'warn',
            {
                singleQuote: true,
                semi: false,
                printWidth: 80,
                trailingComma: 'none',
                endOfLine: 'auto'
            }
        ],
        'vue/multi-word-component-names': [
            'warn',
            {
                ignores: ['index']
            }
        ],
        'vue/no-setup-props-destructure': ['off']
    }
}

 这个就是eslint的基本配置了,先查查能不能改.具体要看报错的问题.

插件弄好了之后pnpm i 或者npm i  下载依赖的包.再pnpm dev跑起来

进入这个页面就没问题了,然后我们有需要进入官网学习的.也可以点上面的小绿点.

最近在学习three.js准备用vue3搞一下试试.希望前端的小伙伴们保持学习的状态.