準備

安裝淘寶 npm鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org

添加系統變量path的內容
因為cnpm會被安裝到D:\Program Files\nodejs\node_global下，而系統變量path并未包含該路徑。在系統變量path下添加該路徑即可正常使用cnpm。
cnpm -v
npm install -g @vue/cli
查看版本（是否安裝成功）：vue -V

創建一個項目

vue create project-name
還原項目 在根目錄 cnpm install

Vue CLI v3.5.1 ┌───────────────────────────┐ │ Update available: 3.9.3 │ └───────────────────────────┘ ? Please pick a preset: (Use arrow keys) > default (babel, eslint)Manually select features

選擇第二個

Vue CLI v3.5.1 ┌───────────────────────────┐ │ Update available: 3.9.3 │ └───────────────────────────┘ ? 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 sele? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert sele? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert sele? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert sele? Check the features needed for your project:(*) Babel >(*) TypeScript( ) Progressive Web App (PWA) Support(*) Router(*) Vuex(*) CSS Pre-processors(*) Linter / Formatter( ) Unit Testing( ) E2E Testing

這里既然選擇了typescript為什么還要用babel，這里是希望使用babel的編譯功能，ts生成es6代碼，再經過babel編譯成es5代碼；
選擇需要插件 使用空格選擇，回車進行下一步

? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript for auto-detected polyfills? Yes ? 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): (Use arrow keys)? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): > Sass/SCSS (with dart-sass) //注意選這個 最新版本都用這個實現了，用node-sass容易被墻Sass/SCSS (with node-sass)LessStylus ----------回車-------------- ? Pick a linter / formatter config: TSLint ----------回車----------------- ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Lint on save( ) Lint and fix on commit? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json（選擇把配置文件放在一個文件里） ? Save this as a preset for future projects? (y/N) n等待安裝完成� Generating README.md...� Successfully created project admin. � Get started with the following commands:$ cd admin$ npm run serve結束

VSCode 內置格式化插件導致代碼格式化會自動換行問題，解決辦法
1、設置
2、搜索 vetur
3、右邊三個點按鈕，-> open settings.json
添加以下代碼：

"vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatter.js": "vscode-typescript","vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "auto"},"prettyhtml": {"printWidth": 200,"singleQuote": false,"wrapAttributes": false,"sortAttributes": false}}

轉載于:https://www.cnblogs.com/sands/p/11284621.html

總結

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

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