Vue.js 作为前端三大框架之一,一直享有盛誉。本文我们将来实现第一个Vue项目。
准备
安装 Node.js https://nodejs.org/
安装 VSCode https://code.visualstudio.com/Download
输入npm -v
以检查是否安装成功,建议下载最新LTS版本即可。笔者所用为10.8.2
配置镜像源
配置默认源 npm config set registry https://registry.npmmirror.com
配置临时源 npm --registry https://registry.npmmirror.com xxx(选项)
(加速模块下载)
创建项目
打开VSCode
并选择一个文件夹作为工作区。打开终端输入指令:
npm create vue@latest
在配置好源的情况下,将会弹出以下内容。
> npx
> create-vueVue.js - The Progressive JavaScript Framework√ Project name: ... vue-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 an End-to-End Testing Solution? » NoScaffolding project in 项目路径...Done. Now run:npm installnpm run dev
至此,项目创建完成。
按照上述指令运行即可。
运行项目
输入npm run dev
,如果成功,将会给出一个http链接,在浏览器打开即可!你将看到如下页面。