vuecli4プロジェクトとパッケージ構成を作成します

1. vue /cli4.xをインストールします

//卸载
npm uninstall vue-cli -g
//安装
 npm install -g @vue/cli

//安装yarn
npm install -g yarn
yarn config set registry https://registry.npm.taobao.org -g
//http://cdn.npm.taobao.org/dist/node-sass 已经失效
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass -g
yarn config get registry

2.vueプロジェクトを作成します

vue create 项目名称(不可有大写字母)

// 3番目のオンデマンド構成


を選択し、スペースを選択して、Enter

キーを押します。1つのvue2と
1つのvue3です。
ここで

は、vue 2がルーティング履歴モードを使用するかどうかを選択します。個人とプロジェクトに応じて、
使用しないことを選択できます。開発中の履歴。オンラインになったら
、バックエンドで関連する構成を行う必要があります。Enterキーを押し続けます。

このルーキーはまだdart-sassを認識していないため、
node-sassを

選択して、ESLint自動コードフォーマット検出をそれぞれ選択します。防止のみ、airbnb構成、ラベル構成、最大構成、ここで1つの超左後部構成

選択コード検出タイミングを選択します。コード

更新を保存するときにここでテストを選択すると、構成ファイルがpakage.jsonのみまたは別のファイルに変更されます。 、個々のファイルを選択できる場合は

、上記のプリセット構成が保存されているかどうかをクリアします。ここでは必要ありません。プロジェクトを作成するたびに再選択するのは面倒ではありません。すぐに選択します。nと入力します。

エラーが報告された場合でも、
慌てる必要はありません

。node_modulesを削除してください

npm install -g cnpm -registry=https://registry.npm.taobao.org

cnpm iを使用して、依存関係を再度ダウンロードします

3.プロジェクトを実行します

yarn serve

このURLをブラウザ

4にコピーします。これまでのところ、成功しています。babel.config.js
がない場合は、以下のbabel.config.jsを設定してください。

//安装: 
npm install babel-plugin-component -D

インストールが成功すると、ファイルが生成されます。babel-config.js
次の構成要素ファイルがオンデマンドでロードされます

module.exports = {
    
    
  presets: [
    "@vue/cli-plugin-babel/preset"
  ],
  plugins: [
    [
      "component",
      {
    
    
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
}

5.以下のvue.config.js構成を開始します。このファイルなしで、新しい構成を作成します

module.exports = {
    
    
    publicPath: "./",//打包后的位置(如果不设置这个静态资源会报404)
    // publicPath: process.env.NODE_ENV === "production" ? "http://47.92.237.225:8080/dist" : "./",
    outputDir: "dist",//打包后的目录名称
    assetsDir: "static",//静态资源目录名称
    productionSourceMap: false,  //去掉打包的时候生成的map文件
    lintOnSave: true,
    filenameHashing: false,
    devServer: {
    
    
        //sockHost: "http://192.168.2.22:8080/",
        //disableHostCheck: true,
        host: "0.0.0.0",  //不清楚主机和目的网络
        port: 8080, // 源地址端口，自行修改
       // disableHostCheck: true,
        //hotOnly: false,
       // useLocalIp: false,
               proxy: {
    
    
            '/api': {
    
    
                target: "http://localhost:8888",//设置你调用的接口域名和端口号 别忘了加http
                changeOrigin: true,
                pathRewrite: {
    
    
                    '^/api': ''
                    //这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替
                    //比如我要调用'http://40.00.100.133:3002/user/login'，直接写‘/api/user/login'即可
                }
            }
        }
    }
}

6.ルーティング遅延読み込みを構成します

//1、在命令行执行
 npm install babel-plugin-dynamic-import-node -S -D
//2、在babel.config.js中添加插件

待更新