|
2 | 2 |
|
3 | 3 | ## Prerequisites |
4 | 4 |
|
5 | | -Before proceeding, make sure you have [Node 12](https://nodejs.org/en/) and [Yarn 1](https://classic.yarnpkg.com/lang/en/) installed. |
| 5 | +Before proceeding, make sure you have [Node 12 or 14](https://nodejs.org/en/) installed. You can check this by running the following command: |
6 | 6 |
|
7 | | -## Using Vue Storefront CLI |
| 7 | +```bash |
| 8 | +node -v |
| 9 | +``` |
| 10 | + |
| 11 | +## Installation steps |
8 | 12 |
|
9 | | -The easiest way to get started with Vue Storefront is to set up your project using our CLI. You can run it using the `npx` command: |
| 13 | +### Step 1: Generate a new project |
| 14 | + |
| 15 | +The easiest way to get started with Vue Storefront is to set up your project using our CLI. You can run it using the following command: |
10 | 16 |
|
11 | 17 | ```bash |
12 | | -# Run Vue Storefront CLI |
13 | 18 | npx @vue-storefront/cli init |
14 | 19 | ``` |
15 | 20 |
|
16 | | -Enter the name of the project and select the backend platform you wish to use. |
| 21 | +It will ask you to enter the project's name and select the e-commerce platform you wish to use. Once selected, the CLI will create project files in the directory matching your project name. |
| 22 | + |
| 23 | +::: warning |
| 24 | +CLI will use the project name you enter to create a new directory, so **avoid using special characters and spaces**. |
| 25 | +::: |
| 26 | + |
| 27 | +### Step 2: Install dependencies |
17 | 28 |
|
18 | | -Once selected, the CLI creates the project files in the directory matching your project name. The only thing left is to go to this directory in the terminal and install the dependencies: |
| 29 | +Go to the newly created directory and install the required dependencies: |
19 | 30 |
|
20 | 31 | ```bash |
21 | | -# Go to project folder |
22 | 32 | cd <project_name> |
23 | 33 |
|
24 | | -# Install required dependencies |
25 | | -yarn install |
| 34 | +npm install |
26 | 35 | ``` |
27 | 36 |
|
28 | | -Now the project is ready. To start the application in development mode, use the `yarn dev` command: |
| 37 | +### Step 3: Configure the project |
| 38 | + |
| 39 | +The next step is to configure your project, and it's different for every e-commerce integration. Go to the [Integrations](/integrations/) page, open the documentation for the integration you selected in our CLI, and look for the page describing the configuration steps. |
| 40 | + |
| 41 | +### Step 4: Start the project |
| 42 | + |
| 43 | +The project is now ready. You can start the application in development mode using the command below. You can read more about available commands and environments on the [Commands and deployment](https://nuxtjs.org/docs/2.x/get-started/commands/) page in Nuxt.js documentation. |
29 | 44 |
|
30 | 45 | ```bash |
31 | | -# Start the project in development mode |
32 | 46 | yarn dev |
33 | 47 | ``` |
34 | 48 |
|
35 | | -You can read more about available commands and environments on [commands](https://nuxtjs.org/docs/2.x/get-started/commands/) page in Nuxt.js documentation. |
36 | | - |
37 | 49 | ## Recommended tools |
38 | 50 |
|
39 | | -### Vue.js Devtools |
| 51 | +Below are the tools we use to make the development and debugging easier, and we recommend you use them too. |
40 | 52 |
|
41 | | -We strongly recommend installing [Vue.js Devtools](https://github.com/vuejs/vue-devtools#installation) in your browser. It's an excellent tool for viewing component structure and their current state, inspecting events and routes, and much more. |
42 | | - |
43 | | -<center> |
44 | | - <img src="../images/general/vue-js-devtools-install.gif" alt="Process of installing Vue.js Devtools plugin in Chrome browser"/> |
45 | | -</center> |
46 | | - |
47 | | -*(Vue.js Devtools installation in Chrome browser)* |
48 | | - |
49 | | -<center> |
50 | | - <img src="../images/general/vue-js-devtools.gif" alt="Usage of Vue.js Devtools with Vue Storefront application"/> |
51 | | -</center> |
| 53 | +### Vue.js Devtools |
52 | 54 |
|
53 | | -*(Vue.js Devtools usage example)* |
| 55 | +We strongly recommend installing [Vue.js Devtools](https://devtools.vuejs.org/guide/installation.html) in your browser. It's an excellent tool for viewing component structures and their current state, inspecting events, routes, and much more. |
54 | 56 |
|
55 | 57 | ### Vetur for VS Code |
56 | 58 |
|
57 | | -For those using Visual Studio Code as their main code editor, we also recommend using [Vetur extension](https://marketplace.visualstudio.com/items?itemName=octref.vetur). |
58 | | -It speeds up the development of Vue.js-based applications by providing, amongst many others, features like Vue.js code autocompletion and syntax highlighting. |
59 | | - |
60 | | -To install Vetur extension: |
61 | | - |
62 | | -1. Open VS Code |
63 | | -2. Open `Extensions` |
64 | | -3. Search for `Vetur` |
65 | | -4. Click `Install` |
66 | | - |
67 | | -<center> |
68 | | - <img src="../images/general/vs-code-vetur-install.gif" alt="Process of installing of Vetur plugin in Visual Studio Code" /> |
69 | | -</center> |
70 | | - |
71 | | -*(Vetur installation in Visual Studio Code marketplace)* |
72 | | - |
73 | | -<center> |
74 | | - <img src="../images/general/vs-code-vetur.gif" alt="Example of autocompletion provided by Vetur" /> |
75 | | -</center> |
76 | | - |
77 | | -*(Example of code autocompletion provided by Vetur)* |
| 59 | +For those using Visual Studio Code as their primary code editor, we also recommend using [Vetur extension](https://marketplace.visualstudio.com/items?itemName=octref.vetur). |
| 60 | +It speeds up the development of Vue.js-based applications by providing features like Vue.js code autocompletion and syntax highlighting. |
78 | 61 |
|
79 | 62 | ## What's next? |
80 | 63 |
|
|
0 commit comments