vueスキャフォールディングv-cli、最初のvueプログラム

1.v-cliのインストール

• v-cli vueクライアントスキャフォールディングを再生するときは、node.jsをインストールする必要があります。これはjsパッケージのフロントエンド管理用のツールです。
• vue-cliスキャフォールディングを正式にインストールする

1. npm install vue-cli -g
2. vue list 

vueリストが利用できない場合は、コンピューターからログアウトします

2.webpackを使用してvueプログラムを作成します

1.ディレクトリを選択し、このディレクトリでcmdウィンドウを開きます。すべての手順は次のとおりです。

vue init webpack myvue # 等待nodejs构建
cd myvue  # 进入myvue目录下
npm install 
npm run dev 

プロジェクトをビルドするときに、いくつかのプロジェクト情報を入力します。すべていいえを選択しました。[はい]を選択できます

。npmのインストール後にプラグインがプロジェクトに自動的に追加されます。エラーが発生する可能性があります。プロンプトに従って修正してください。

現在のプロジェクトを実行し、以下のポートに

アクセスしてください。プロジェクトにアクセスしてください。

3.カタログの紹介

• アイデアで開いたフォルダを使用します
  

4.webpackパッケージvueをjsファイルに

• webpackインストールは、実行するためにes6構文をes5構文にパッケージ化してコンパイルします

npm install webpack -g  # 打包工具
npm install webpack-cli -g # 客户端工具

フロントエンドモジュールの開発ポイント、各パケットは相互に導入される可能性があります

。WebPACKhello.js によってコンパイルされたJsファイル

// es6 语法 exports暴露一个方法
exports.sayHi = function() {
    
    
    document.write('<h3>bitqian666</h3>')
}

main.js

// 导入js文件
let hello = require('./hello')
hello.sayHi()

パッケージ構成

module.exports = {
    
    
    entry: './modules/main.js',
    output: {
    
    
        filename: './bundle.js'
    }
}

控制台运行 webpack

bundle.jsを生成し、直接使用します