確保nodejs.cn已經安裝好

判斷是否安裝好

node -v（檢查版本號）
npm -v （檢查是否安裝npm）

npm淘寶鏡像

npm install -g cnpm --registry=https://registry.npm.taobao.org（如果沒有安裝淘寶鏡像，后面的命令把cnpm換成npm）

創建vue項目

1、cnpm install -g @vue/cli

2、vue create my-project

按鍵盤上下鍵選擇默認（default）還是手動（Manually），如果選擇default，一路回車執行下去就行了（注：現在vue-cli3.0默認使用yarn下載），這里我選擇手動

Vue CLI v4.5.4 ? Please pick a preset:Default ([Vue 2] babel, eslint)Default (Vue 3 Preview) ([Vue 3] babel, eslint) > Manually select features

根據需求選擇， 按鍵盤上下鍵移動，按space鍵確認選擇

Vue CLI v4.5.4 ? Please pick a preset: Manually select features ? Check the features needed for your project:(*) Choose Vue version(*) Babel( ) TypeScript( ) Progressive Web App (PWA) Support(*) Router(*) Vuex >(*) CSS Pre-processors(*) Linter / Formatter( ) Unit Testing( ) E2E Testing

選擇您想要開始項目的Vue.js版本

Vue CLI v4.5.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter ? Choose a version of Vue.js that you want to start the project with2.x > 3.x (Preview)

因為安裝了router所以會彈出來，選擇Y

Vue CLI v4.5.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter ? Choose a version of Vue.js that you want to start the project with 3.x (Preview) ? Use history mode for router? (Requires proper server setup for index fallback in production) y

選擇css預處理，這里我選擇stylus

Vue CLI v4.5.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter ? Choose a version of Vue.js that you want to start the project with 3.x (Preview) ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):Sass/SCSS (with dart-sass)Sass/SCSS (with node-sass)Less > Stylus

選擇 ESLint with error prevention only作為代碼檢查

Vue CLI v4.5.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter ? Choose a version of Vue.js that you want to start the project with 3.x (Preview) ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus ? Pick a linter / formatter config:> ESLint with error prevention onlyESLint + Airbnb configESLint + Standard config ESLint + Prettier

Lint on save（保存就檢測），Lint and fix on commit （fix和commit檢查），我選擇 Lint on save

Vue CLI v4.5.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter ? Choose a version of Vue.js that you want to start the project with 3.x (Preview) ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus ? Pick a linter / formatter config: Prettier ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Lint on save( ) Lint and fix on commit

把babel .eslint這些文件放在獨立的文件里還是package.json里，我選擇放在獨立文件夾

Vue CLI v4.5.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter ? Choose a version of Vue.js that you want to start the project with 3.x (Preview) ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) > In dedicated config filesIn package.json

是否記錄下，以便下次繼續使用這套配置，選擇N 不記錄

Vue CLI v4.5.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter ? Choose a version of Vue.js that you want to start the project with 3.x (Preview) ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? n

我選擇npm安裝（根據自己需求來）

Vue CLI v4.5.6 ? Please pick a preset: Manually select features ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ? Check the features needed for your project: ? Check the features needed for your project: ? Check the features needed for your project: ? Check the features needed for your project: ? Check the features needed for your project: ? Check the features needed for your project: ? Check the features needed for your project: ? Check the features needed for your project: ? Check the features needed for your project: ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter ? Choose a version of Vue.js that you want to start the project with 3.x (Preview) ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? No ? Pick the package manager to use when installing dependencies:Use Yarn > Use NPM

表示安裝成功

Vue CLI v4.5.4 ? Creating project in C:\Users\Administrator\my-project. � Initializing git repository... ?? Installing CLI plugins. This might take a while...> yorkie@2.0.0 install C:\Users\Administrator\my-project\node_modules\yorkie > node bin/install.jssetting up Git hooks done> core-js@3.6.5 postinstall C:\Users\Administrator\my-project\node_modules\core-js > node -e "try{require('./postinstall')}catch(e){}"> ejs@2.7.4 postinstall C:\Users\Administrator\my-project\node_modules\ejs > node ./postinstall.jsadded 1241 packages from 919 contributors in 33.591s50 packages are looking for fundingrun `npm fund` for details� Invoking generators... � Installing additional dependencies...added 92 packages from 91 contributors in 9.984s55 packages are looking for fundingrun `npm fund` for details? Running completion hooks...� Generating README.md...� Successfully created project my-project. � Get started with the following commands:$ cd my-project

安裝后移動到目錄 并啟動

cd my-project
npm run serve

啟動成功

DONE Compiled successfully in 4493ms 5:04:29 ├F10: PM ┤App running at:- Local: http://localhost:8081/- Network: http://192.168.5.251:8081/Note that the development build is not optimized.To create a production build, run npm run build.

總結

以上是生活随笔為你收集整理的vue新建一个项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。