Do you know how to set up a Vue.js project?
Updated by Zach Keeping [SSW] 2 years ago. See history
123
Getting started with a Vue.js project is easy. Here's how you can quickly get up and running: ### create-vue (Recommended) [create-vue](https://github.com/vuejs/create-vue) is the official and recommended tool for scaffolding a Vue.js project. It uses [Vite](https://vitejs.dev/) (also from Vue creator Evan You) to help quickly and easily set up a Vue.js project to your specifications. **Note:** This requires Node v16 or higher. 1. In your command line, run: ```shell npm init vue@latest ``` 2. This will install and run create-vue. It will then prompt you for a project name and step you through a series of prompts for the features you wish to enable: <imageEmbed alt="Image" size="large" showBorder={false} figureEmbed={{ preset: "default", figure: 'The options provided by create-vue for scaffolding a Vue.js project', shouldDisplay: true }} src="/uploads/rules/set-up-vue-project/create-vue.png" /> 3. When this completes, you're all done! You will now have a Vue.js project set up in a folder matching the project name you set. To get started running a dev server, execute the following: ```shell cd {{ PROJECT_NAME }} npm install npm run dev ``` ### Vue CLI (Not recommended for new projects) [Vue CLI](https://cli.vuejs.org/) is the official CLI toolchain for Vue.js development using Webpack. Previously, this was the recommended tool for scaffolding a Vue.js project but is now no longer supported, in favour of create-vue and Vite. Unless your project requires Webpack, it is recommended to use create-vue instead. **Note:** This requires Node v8.6.0 or higher. Scaffolding a project in Vue CLI takes just a few steps: 1. Install Vue CLI: ```shell npm install -g @vue/cli ``` 2. Create a new project using "vue create": ```shell vue create {{ PROJECT_NAME }} ``` 3. You will then be presented with a few options. Here you can choose to get up and running using default presets, or you can manually choose what features you want for your project: <imageEmbed alt="Image" size="large" showBorder={false} figureEmbed={{ preset: "default", figure: 'Top-level options when running "vue create" using Vue CLI', shouldDisplay: true }} src="/uploads/rules/set-up-vue-project/vue-cli-1.png" /> <imageEmbed alt="Image" size="large" showBorder={false} figureEmbed={{ preset: "default", figure: 'Manual feature selection instead of using a preset in Vue CLI', shouldDisplay: true }} src="/uploads/rules/set-up-vue-project/vue-cli-2.png" /> 4. Once you've selected your options and allowed it to complete, you'll now have a basic Vue.js project set up in a folder matching the project name you entered. You can get a dev server running by executing the following: ```shell cd {{ PROJECT_NAME }} npm run serve ```