vue-cli 3+typescriptを使ったプロジェクトテンプレート作成プロジェクトの教程
3164 ワード
バージョンの問題
グローバルに古いバージョンのvue-cli(1.xまたは2.x)をインストールした後、まずそれをアンインストールします(vue-Vは自分の足場バージョンを確認してください)
インストール
vue uiは足場のパターン化画面を開き、demoディレクトリに進みます。導入します。
インストール依存
プロジェクトを実行
対応するフォルダの下のcmd入力
ファイルディレクトリの説明
rem適合問題、関係:1 rem=100 px、画面<1000 px、処理を縮小しません。
vscode tsの設定(ファイル->オプション->設定)
ここでvue-cli 3+typescriptを使用したプロジェクトテンプレートの作成プロジェクトについての記事を紹介します。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の作成プロジェクト内容は以前の文章を検索してください。または以下の関連記事を引き続きご覧ください。これからもよろしくお願いします。