vue-cli 3+typescriptを使ったプロジェクトテンプレート作成プロジェクトの教程


バージョンの問題
グローバルに古いバージョンのvue-cli(1.xまたは2.x)をインストールした後、まずそれをアンインストールします(vue-Vは自分の足場バージョンを確認してください)npm uninstall vue-cli -g // yarn global remove vue-cli注:Vue CLI 3はnodeJs≧8.9が必要です。
インストールcnpm install -g @vue/cli作成項目(以下、vue uiグラフィックスインターフェースで配置されたdemoを導入するだけです。)
vue uiは足場のパターン化画面を開き、demoディレクトリに進みます。導入します。

インストール依存

プロジェクトを実行

対応するフォルダの下のcmd入力npm run serveプロジェクト部分の説明
ファイルディレクトリの説明

rem適合問題、関係:1 rem=100 px、画面<1000 px、処理を縮小しません。

vscode tsの設定(ファイル->オプション->設定)

{
 "window.zoomLevel": 0,
 "workbench.colorTheme": "One Monokai",
 "editor.fontSize": 18,
 "search.followSymlinks": false,
 "emmet.includeLanguages": {
 "wxml": "html"
 },
 "vetur.validation.template": false,
 "minapp-vscode.disableAutoConfig": true,
 "prettier.tabWidth": 4,
 "vetur.format.defaultFormatter.html": "prettier",
 "editor.codeActionsOnSave": {
 "source.fixAll.tslint": true
 },
 //          tslint   
 "tslint.autoFixOnSave": true,
 // vscode               tabsize   
 "editor.detectIndentation": false,
 //     tabsize
 "editor.tabSize": 2,
 // #            
 "editor.formatOnSave": true,
 "prettier.tslintIntegration": true,
 // #         
 "prettier.semi": false,
 // #          
 "prettier.singleQuote": true,
 // #   ( )            
 "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
 // #           
 // # vue  js       ts       
 "vetur.format.defaultFormatter.ts": "vscode-typescript",
 "vetur.format.defaultFormatter.js": "vscode-typescript",
 "vetur.format.defaultFormatterOptions": {
 "js-beautify-html": {
  "wrap_attributes": "force-aligned"
  // #vue   html       
 }
 },
 //   tslint        
 "tslint.validateWithDefaultConfig": true,
 "javascript.implicitProjectConfig.experimentalDecorators": true,
 "breadcrumbs.enabled": true,
 "[typescript]": {
 "editor.defaultFormatter": "vscode.typescript-language-features"
 },
 "[json]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
}
締め括りをつける
ここでvue-cli 3+typescriptを使用したプロジェクトテンプレートの作成プロジェクトについての記事を紹介します。vue-cli 3+typescriptの作成プロジェクト内容は以前の文章を検索してください。または以下の関連記事を引き続きご覧ください。これからもよろしくお願いします。