What does executing the command on the command line mean to initialize the vue project?

Executing the command "vue init webpack vue-project" on the command line means initializing the vue project. This command means initializing the "vue-project" project based on webpack; where "vue-project" refers to the user's own The defined project name. The project name cannot use uppercase letters.

The operating environment of this tutorial: windows10 system, vue3 version, DELL G3 computer.

VUE project initialization step command

1, install Node.js;

Window installation package Mac installation package
Check whether the installation is successful node -v
If the version is displayed, it is successful, as shown in the figure:

2 , install the vue-cli scaffolding;

Open the command line window cmd (window R, enter cmd and then Enter)

Execute the command under cmdcnpm install vue-cli - g

The installation is successful as shown in the figure

3, initialize the project folder;

After you prepare Open the cmd folder where the project was built and execute the command vue init webpack vue-project(Note: vue-project is a custom project name, the project name cannot use capital letters)

As shown in the picture:

After the initialization is completed, as shown in the figure:

The successful startup of the project is shown in the figure:

The page effect after successful startup is as follows:

Other details to be added:

1, the command line tool I use is Git, the following is the latest installation package link
Window installation package

2, http://localhost:8081/ in the address bar #/ How to remove the # sign behind it

Open the project in the editor, find index.js under router under src in the directory, open it, and change the mode to mode:'history' as shown in the picture:

3. After starting the project, there is no need to copy and paste the address. That is, after running npm run dev, the page will automatically open in the browser.

Open the project in the editor and find index.js under config. Find autoOpenBrowser: false, line 18 below. Just change false to true. As shown in the picture:

When creating a new branch and configuring routing, pay attention to the path:

4. Style

less_loader depends on less, both need to be installed, which can be installed in the project dependencies (vue ui) or terminal installation;
If the following error occurs, it means there is no installation style rely.

Terminal installation style dependency:

• If it is regular, execute npm install stylus-loader css-loader style-loader - -save-dev just install the dependencies

• If it is less, execute npm install less less-loader --save-dev to install the dependencies.

• If it is sass, just execute npm install sass sass-loader --save-dev to install the dependencies. Or ($npm intall sass-loader --save; $npm install node-sass --save)
  

When installing the latest version of less-loader, the vue project prompts an error: Failed to compile with 1 errors

ERROR  Failed to compile with 1 errors                                 14:20:44
 error  in ./src/components/HelloWorld.vue
Module build failed: TypeError: loaderContext.getResolve is not a function
    at createWebpackLessPlugin (D:\work\vue3.0\gcmmobile\node_modules\less-loader\dist\utils.js:31:33)
    at getLessOptions (D:\work\vue3.0\gcmmobile\node_modules\less-loader\dist\utils.js:148:31)
    at Object.lessLoader (D:\work\vue3.0\gcmmobile\node_modules\less-loader\dist\index.js:27:49)
 @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!./node_modules/less-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/HelloWorld.vue 4:14-378 14:3-18:5 15:22-386
 @ ./src/components/HelloWorld.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js1234567891011121314

is a version problem. The solution is to lower the less-loader version. My vue version is 2.5.2.

Uninstall the latest version first

yarn remove less-loader
npm uninstall less-loader123

Install the less-loader 5.0.0 version

yarn add less-loader@5.0.0
npm install less-loader@5.0.0 -D123

5.npm ERR! code ERESOLVE:

Error when running npm install:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: operatingsystem@0.1.0
npm ERR! Found: vue@3.1.5
npm ERR! node_modules/vue
npm ERR!   vue@"^3.0.0" from the root project
npm ERR!12345678

Console input npm -V found that my npm version is 7.x, because npm7.x The version is stricter on some commands than npm6.

2) Using npm6.x

Tips: There is no need to uninstall npm@7 when using npm@6. You can use npx to specify the version of npm. For example: npx -p npm@6 npm i --legacy-peer-deps

If this doesn't work immediately, you can delete node_modules and package-lock.json

first

Related recommendations: vue.js video tutorial

The above is the detailed content of What does executing the command on the command line mean to initialize the vue project?. For more information, please follow other related articles on the PHP Chinese website!