Skip to content

Commit e384e3f

Browse files
authored
docs: update Installation docs (vuestorefront#6635)
1 parent 4e5fd32 commit e384e3f

File tree

5 files changed

+30
-47
lines changed

5 files changed

+30
-47
lines changed

packages/core/docs/general/installation.md

Lines changed: 30 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -2,79 +2,62 @@
22

33
## Prerequisites
44

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:
66

7-
## Using Vue Storefront CLI
7+
```bash
8+
node -v
9+
```
10+
11+
## Installation steps
812

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:
1016

1117
```bash
12-
# Run Vue Storefront CLI
1318
npx @vue-storefront/cli init
1419
```
1520

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
1728

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:
1930

2031
```bash
21-
# Go to project folder
2232
cd <project_name>
2333

24-
# Install required dependencies
25-
yarn install
34+
npm install
2635
```
2736

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.
2944

3045
```bash
31-
# Start the project in development mode
3246
yarn dev
3347
```
3448

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-
3749
## Recommended tools
3850

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.
4052

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
5254

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.
5456

5557
### Vetur for VS Code
5658

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.
7861

7962
## What's next?
8063

-278 KB
Binary file not shown.
-155 KB
Binary file not shown.
-262 KB
Binary file not shown.
-453 KB
Binary file not shown.

0 commit comments

Comments
 (0)