vue：webpackは完全なプロジェクトを作成します

webpack-Vueプロジェクト

プロジェクトを作成する

NPMを使用して関連コンポーネントの依存関係をインストールするときに、権限の問題が発生する可能性があります。この場合、PowerShell管理者モードで実行できます。[スタート]メニュー->右クリック-> Windows PowerShell（管理者）

v_musicという名前のプロジェクトを作成する

# 使用 webpack 打包工具初始化一个名为 v_music  的工程 
vue init webpack v_music 

依存関係をインストールする

4つのプラグインをインストールする必要があります：vue-router、element-ui、vue-axios、sass-loader、node-sass

# 进入工程目录
cd v_music
# 安装 vue-router
npm install vue-router --save-dev
# 安装 element-ui
npm i element-ui -S
# 安装 axios
npm install --save axios vue-axios
# 安装 SASS 加载器
npm install sass-loader node-sass --save-dev

# 安装依赖
npm install

プロジェクトを開始する

npm run dev

ランニング効果

ブラウザでhttp：// localhost：8080を開くと、次の効果が表示されます

添付：NPM関連のコマンドの説明

• npm install moduleName：モジュールをプロジェクトディレクトリにインストールします
• npm install -g moduleName：-gは、モジュールをグローバルにインストールすることを意味します。ディスクにインストールされる場所は、npm configプレフィックスの場所によって異なります
• npm install -save moduleName：--saveは、モジュールをプロジェクトディレクトリにインストールし、パッケージファイルの依存関係ノードに依存関係を書き込むことを意味します。-Sは、コマンドの省略形です。
• npm install -save-dev moduleName：--save-devは、モジュールをプロジェクトディレクトリにインストールし、パッケージファイルのdevDependenciesノードに依存関係を書き込むことを意味します。-Dは、コマンドの省略形です。

ソースコード

ルーティングを構成する

1. ルーティングテーブルを作成する

   • srcの下にルーターフォルダーを作成し、その中にindex.jsを作成します。このファイルはルーティングテーブルです

   • import Vue from 'vue'
     import VueRouter from "vue-router";
     
     import Login from "../views/login";
     
     // 安装路由
     Vue.use(VueRouter);
     
     // 配置路由
     export default new VueRouter({
       routes:[
         {
           //路由路径
           path:'/login',
           //路由名称
           name:'Login',
           //跳转到组件
           component:Login
         }
       ]
     })
     

2. main.jsでルーティングテーブルを構成する

   • // The Vue build version to load with the `import` command
     // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
     import Vue from 'vue'
     import App from './App'
     import VueRouter from 'vue-router'	//全局使用路由模块
     // 导入上面创建的路由配置目录
     import router from './router'
     
     Vue.use(VueRouter);
     
     /* eslint-disable no-new */
     new Vue({
       el: '#app',
       //配置路由
       router,
       components: { App },
       template: '<App/>'
     })
     

3. App.vueでルーティングビューを作成する

   • <template>
       <div id="app">
         <router-view>首页</router-view>
       </div>
     </template>
     
     <script>
     
     export default {
       name: 'App'
     }
     </script>
     
     <style>
     </style>