Node.js取付使用-VueCLI取付使用-エンジニアリングVue.js開発

作者|Jeskson
出典|ダダフロントエンド居酒屋
構築ノードjs環境
何だ?jsのプロフィールは?JavaScriptベースの実行環境ですjsは2009年5月に発表され、Chrome V 8エンジンをパッケージ化し、RyanDahlが開発した.Chrome V 8エンジンはJavaScriptを実行する速度が速く、パフォーマンスが良い.
Node.jsはmoduleモジュールで異なる機能を区分し、modeleモジュールはc++言語のクラスライブラリに似ており、ユーザーは相対パスまたは絶対パスを通じてモジュールの位置を見つけることができる.

var mymodule = require('./mymodule.js');

Node.jsのダウンロード
ダウンロード先:
https://nodejs.org/en/download/
インストールパッケージファイルをダブルクリックしてダウンロードします.
Linuxシステムのインストール:

sudo apt-get update
sudo apt-get install node

  

sudo apt update
sudo apt install node

ノードを表示します.jsのバージョン番号:
npmのインストール使用、npmは1つのパッケージ管理ツールで、ユーザーがnpmサーバーから他人が書いた第三者パッケージをダウンロードしてローカルで使用することを許可して、ユーザーがnpmサーバーから他人が書いたコマンドラインプログラムをダウンロードしてインストールしてローカルで使用することを許可します.ユーザーが自分で作成したパッケージまたはコマンドラインプログラムをnpmサーバにアップロードして他の人が使用できるようにします.
インストールに成功した後の効果が表示されます.
npmコマンドをアップグレードするにはどうすればいいですか?コマンドを使用:

sudo npm install npm -g

モジュールの使用
npmコマンドを使用してnodeをインストールできます.jsモジュール:

npm install 

一般的なWebフレームワークモジュールexpressのインストール

npm install express

インストールが完了すると、expressはnode_に置かれます.modulesディレクトリにあります.
npmのインストール分:
ローカルインストールとグローバルインストール、ローカルlocal、グローバルglobalの2種類:

//     
npm install express

//     
npm install express -g

注意:(エラーメッセージ)

npm err! Error: connect E... 127.0.0.1...

解決コマンド:

npm config set proxy null

ローカルインストール、直接インストールパッケージをnode_に挿入modulesディレクトリでは、この方法でローカルインストールパッケージrequire()を導入できます.
グローバルインストール、インストールパッケージの配置
users/localディレクトリまたはNode.jsのインストールディレクトリの下:

//        
npm install express -g

では、どのモジュールをダウンロードし、グローバルにインストールされているモジュールを表示するかを見てみましょう.

npm list -g

モジュールのバージョン番号も表示できます.

npm list grunt

package.jsonファイル:

{
 "name":"npm",
 "version":"1.2.2",
 "main":"index.js",
 "dependencies":{
  "vue":"^2.3.2"
 },
 "devDependencies":{},
 "scripts":{
 "test":"echo ..."
 },
 "author":"",
 "license":"ISC",
 "description":""
}

ファイルのプロパティの説明:
nameはパッケージ名、versionはパッケージのバージョン番号、descriptionはパッケージの説明、homepageはパッケージの公式サイト、authorはパッケージの作者名、contributorsはパッケージの他の貢献者の名前です.
dependenciesは依存パッケージリスト、repositoryはパッケージ代馬格納場所のタイプ、mainフィールドはプログラムのメインエントリファイル、keywordsキーワードを指定します.
アンインストールNode.jsモジュール:

npm uninstall express

アンインストール後、node_を確認する必要があります.modulesディレクトリがまだ存在するかどうか:
コマンドで確認できます.

npm ls

モジュールを更新するコマンド:

npm update express

検索コマンドモジュール:

npm search express

コマンドを使用してnpmリポジトリにユーザーを登録します.

npm adduser

コマンド発行モジュールを使用するには、次の手順に従います.

npm publish

npmは、x,y,zのバージョン番号、セカンダリバージョン番号、パッチバージョン番号の順に、バージョン番号を使用してコードを管理します.
バグを修正すると、zのを更新します.機能を増やしてyを更新し、大きな変動があればxを更新します.
yarnのインストール
yarnは、npmを使用する際にユーザーが直面する多くの問題を解決するための新しいJavaScriptパッケージ管理ツールです.
yarn,npmの比較:
npmのインストールはシリアルで、yarnのインストールは並列で、yarnのインストール速度を高めます
ダウンロードしたパッケージはキャッシュされ、繰り返しダウンロードする必要はありません.yarnはオフラインインストールをサポートします.
yarn常用コマンド:
yarn initはプロジェクトを初期化しpackageを生成する.jsonファイル、yarn addは依存パッケージを追加し、yarnはpackageに基づいている.jsonファイルはすべての依存パッケージをインストールし、yarn installを使用することもできます.
yarn upgradeは依存パッケージをアップグレードし、yarn removeは依存パッケージを削除します.
vue-devtoolsデバッグツール
ダウンロード先:
https://www.crx4chrome.com/cr...
インストール方法は以下の通りです.Chromeブラウザ開発者モードを開き、中にドラッグすればいいです.
vue-devtools使用:
http://プロトコルで使用で、ブラウザでvueパネルを選択し、現在のコンポーネントの詳細を表示する必要があります.vue cli説明
Vue CLIって何ですか?これはVueに基づいて迅速に開発されたシステムであり、各種コンポーネントツールがインテリジェントな構成を行うことを保証し、各ツールに構成を調整する機能を提供している.CLIサービスはnpmパッケージであり、vue/cliが作成した各プロジェクトにローカルにインストールされます.
vue createで新しいプロジェクトの足場を作成できます.
次のコマンドでcliパッケージをインストールします.

npm install -g @vue/cli

  ：

yarn global add @vue/cli

インストールが成功したら、バージョンにアクセスして、成功したかどうかを確認します.

vue --version

Vue CLI使用:
vue createコマンドを使用してvueプロジェクトを作成します.
プロジェクトディレクトリ構造:
buildはプロジェクトのために関連コードを構築し、configは構成ディレクトリであり、ポート番号を含む、srcは私たちが開発するディレクトリであり、ディレクトリの下にはassetsが画像ファイルを格納し、Appがある.vueはプロジェクトエントリファイル、main.jsはプロジェクトのコアファイルです.node_modulesはnpmロードのプロジェクト依存モジュールであり、testは初期テストディレクトリであり、staticは静的リソースディレクトリであり、indexである.htmlはトップページのエントリファイル、package.jsonはプロジェクトプロファイル、READMEである.mdはプロジェクト説明ファイルです.
ビジュアル作成プロジェクトビジュアル作成プロジェクト:vue ui

// vue.config.js
module.exports = {

}

module.exports = {
 pages: {
  index: {
   // pages    
   entry: 'src/index/main.js',
   //     
   template: 'public/index.html',
   // index.html  
   filename: 'index.html',
   title: 'Index Page'
   chunks: ['chunk-vendors', 'chunk-common', 'index']
  },
  subpage: 'src/subpage/main.js'
  }
 }

JavaScriptモジュール
node.jsでは、ファイルとモジュールが1つずつ対応しています.
コアモジュールとローカルモジュール.
Node.jsがモジュールを参照する方法:
ファイルパスで参照し、モジュール名で参照します.
ECMAScript 6はJavaScript言語の新しい標準であり、2015年6月に発表された.ES 6とJavaScriptの関係について、前者は後者の規格であり、後者は前者の実現であり、後者は前者の言語である.
ES 6はJavaScriptをより強力にし、ES 5のコード設計理念を互換化し、ES 5標準で作成されたコードはES 6で正常に動作する.
Excport対外露出インタフェース

export const sqrt = Math.sqrt;
export function square(x) {
 return x*x;
}
export function diag(x,y) {
 return sqrt(square(x)+square(y));
}

const sqrt = Math.sqrt;
function square(x){
return x*x;
}
function diag(x,y){
return sqrt(square(x)+square(y))
}

export(sqrt,square,diag);

//   
const sqrt = Math.sqrt;
//           
export (sqrt as sql, sqrt as sq2);

as構文で別名を設定し,1つのインタフェースをN個の名前で外部に露出させることができる.
export default
export defaultコマンドを使用してインポートしたインタフェースの名前をカスタマイズすると、モジュールが実際に1つのインタフェースしか露出しない場合があります.

export default function(){}

import myFunc from 'myFunc';
myFunc();

export defaultは、defaultという変数またはメソッドを出力し、名前を変更できます.

function add(x,y){
return x*y;
}

export(add as default);

// export default add;

import(default as myAdd) from 'lib';

// import myAdd from 'lib'

importインポート

import {square, diag} from './lib';

import    as            

export var myVarl = 'varl';

import { myVarl as myCustomVar1 } from './lib';

import          
import 'lib';

❤️ あなたの勉強の足跡を残すことを忘れないでください[いいね+コレクション+コメント]
著者Info:
【作者】:Jeskson
【オリジナル公衆番号】:ダダフロントエンドの居酒屋.
【福祉】:公衆番号は「資料」に返信して独学資料の大礼包を送る(グループに入って分かち合い、何かほしいものがあれば言ってください.私があるかどうか見てください).
【転載説明】:転載は出典を説明してください.ご協力ありがとうございます.~
大フロントエンド開発、フロントエンド開発技術スタックブログ、PHPバックグラウンド知識点、webフルスタック技術分野、データ構造とアルゴリズム、ネットワーク原理など分かりやすくパートナーに提示します.応援ありがとうございます!
本号の内容が不十分な点(例えば、著作権やその他の問題に関連する)があれば、直ちに私たちに連絡して改善すれば、最初の時間に処理されます.
いいね!あなたたちの賛同/励ましが私の書く最大の原動力だからです!
ダダのCSDNへようこそ!
これは品質があり、態度のあるブログです.