脚手架安装

全局安装脚手架

• Yarn安装

yarn global add @vue/cli

• NPM安装

npm install -g @vue/cli

查看安装是否成功

vue --version

创建项目

利用Vite构建工具来创建项目

# npm 6.x
npm init vite@latest <project-name> --template vue

# npm 7+，需要加上额外的双短横线
npm init vite@latest <project-name> -- --template vue

cd <project-name>

npm install

npm run dev

Yarn安装

yarn create vite <project-name> --template vue
cd <project-name>
yarn
yarn dev

目录结构

/project
    .gitignore                git仓库忽略文件
    index.html                页面入口文件
    package.json                安装包依赖文件
    vite.config.js            vite配置文件
    node_modules/                依赖包
    public/                    公共访问目录
    dist/                        打包目录
    src/                        开发逻辑目录


/src
    App.vue                    项目入口文件
    main.js                    项目的核心文件
    assets/                    放置一些图片，如logo等
    components/                组件目录