① 安装Vue CLI:首先,确保你的系统上已经安装了Node.js和npm。然后,通过npm或yarn全局安装Vue CLI。例如,使用npm安装的命令是npm install-g @vue/cli,而使用yarn的命令是yarn global add @vue/cli。安装完成后,可以通过运行vue -V命令来验证Vue CLI是否成功安装。
② 创建新项目:使用Vue CLl创建一个新项目的命令是vue create项目名称。在创建过程中,你可以选择手动选择特性(Manually select features)以进行更详细的配置,或者选择预设(Default (vue2/vue3]babel/ESNext preset))以快速开始。创建过程中,你还可以选择是否使用[ESLint9 进行代码检查,以及配置其他选项如路由、状态管理等。
③ 项目配置:创建项目后,你可以根据需要自定义项目的配置。Vue CLI的项目结构包括node_modules(存放第三方依赖包)、public/index.html(浏览器运行的网页)、src/main.js(webpack打包的入口文件)、src/App.vue(Vue入口页面)和package.json(依赖包列表文件和自定义命令)等主要文件和文件夹。如果需要修改配置,如端口号或ESLint规则,可以在项目的根目录下创建或修改vue.config.js文件。
④ 启动和运行项目:进入项目文件夹后,可以通过运行yarn serve或npm run serve命令来启动开发服务器。这将启动一个内置的webpack热更新开发服务器,允许你在修改代码后实时查看效果。在浏览器中输入相应的地址,即可看到你的Vue应用运行结果。