Home > Article > Web Front-end > 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.
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
firstRelated 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!