vue2.0プロジェクトを作成します

レディ

淘宝網のミラーNPM取り付け
NPM CNPM --registryインストール-g = https://registry.npm.taobao.org
システム変数パスの内容を追加し
node_global下\プログラムファイル\ nodejs \、およびシステム変数のパスは、パスが含まれていません。cnpmがDにインストールされますので。システム変数パス通常の使用cnpmにパスを追加します。
-v CNPM
NPMインストール-gする@ VUE / CLIは
（インストールが成功した場合）のバージョンを表示します。VUE -V

プロジェクトの作成

VUEプロジェクト名の作成
インストールcnpmルートディレクトリに削減プロジェクトを

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ですの選択肢から、ここでのバベルは、TS ES6はコードを生成して、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)
  Less
  Stylus
----------回车--------------
? 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、ボタンの右側にある3つのドット、 - >オープン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
        }
    }

vue2.0プロジェクトを作成します

レディ

プロジェクトの作成

おすすめ