vueプロジェクトで必要な知識

vueログインセクションは主にrouterです.jsのすべての構成ルーティング項目の上にmeta:{requiresAuth:true}を構成し、最外層で構成します.

router.beforeEach((to, from, next) => {
    if (to.matched.some(route => route.meta.requiresAuth)) {
        if (!getToken()) {
            next({ path: '/login' })
        } else {
            next()
        }
    } else {
        console.log(to.matched)
        next()
    }
})

ログインコールインタフェース

 async login() {
            try {
                // await                await   user is undefined     
                let res = await http.post('/api/login', {username: this.phone, password: this.password})
                this.$store.dispatch('login', res.data.user)
                this.$toasted.success('    ').goAway(1500)
                wsStart()
                this.$router.replace({name: 'home'})
            } catch (error) {
                this.$toasted.error(error.message, {icon: 'error'}).goAway(2000)
            }

        }

これにより,各ルーティング上のrequiresAuth属性からtokenがない場合にジャンプさせないと判断できる問題は一般的にすべてのページがtokenがない場合はジャンプ禁止であるがパスワードページおよび登録ページを取り戻すにはtokenがない場合にジャンプしなければならないので,この2つのページのrequiresAuth属性をfalseに設定する.
個人はmuationとactionの違いを理解してmuationとactionはすべてstateの中のデータを変えますしかしやはりmuationの中で非同期の操作を実行することができませんしかしactionの中で一般的にmuationでデータを変えるだけで比較的に複雑なことができます例えばactionの中でパラメータを受信した後にまたこのパラメータで再び要求を発起してそれから要求が完成した後にまた1つの関数あるいは他のものは非同期呼び出しです

Vueプロジェクトの開発前の準備はまずnodeをダウンロードする.jsはgitをダウンロードしてコードクラウド構築プロジェクトを開き、引き下げることで、コードクラウドプラットフォームのヘルプドキュメントを通じてsshスプーンVue-cliのsrcファイルの中でプロジェクトのすべてのソースコードファイル

を構築することができます.

Vueの単一ファイルコンポーネントとルーティングは、ファイルとして使用する.Vueが接尾辞であるときに単一ファイルコンポーネントと呼ばれるテンプレートtemplateにおけるコンポーネントの論理scriptにおけるコンポーネントのスタイルstyleにおけるルーティングは、アドレスによって戻り内容が異なる

である.

Vueでcssスタイルを現在のコンポーネントに対してのみ有効にするにはstyleラベルにscoped属性を付ける必要があるが、現在のコンポーネントのサブコンポーネントがプラグインであればプラグインのスタイルを変更することはできないこの時、1つのラベルにクラス名を付けてこのプラグインを包むことができる例えばこのクラス名がwrapperプラグインのクラス名がstrで書くことができる.wrapper>>>.str{スタイル}3つの矢印は、現在のコンポーネントのサブコンポーネントに対してスタイル

を変更できるスタイル貫通を表す.

                          iconfont         

コンポーネントにiconアイコンを使用してicon公式サイトwww.iconfont.cn選択アイコンはフォルダにcss js iconfontがダウンロードされます.css.eot.svg.ttf.woffは必須jsその他は必須ではありません基本的にすべてのページが使用されるのでmain.jsで引用ページで使用するラベルにclass="iconfont"を書き込む内容であれば、サイトを開いて先ほど選択したアイコンを選択しiconfontに注意する.cssでパスを変更すると./自分で定義したフォルダ

                         Vue         

Vueでgithub検索vue-Awesome-swiperこのプラグインを使用すると、マルチキャストマップのインストールを迅速に構築できます.バージョンを選択するにはnpm install [email protected] --save

幅の高い割合を設定する書き方はoverflow:hidden width:100%height:0 padding-bottom:32.25%このように書くのは高さが永遠に幅の31.25%であることを意味します.もし直接高さ31.25%を書くならば、彼はこれは親要素の31.25%

にすぎません.

移動端がindexにあるとVueで書く.htmlはmeta name=viewportにminimum-scale=1.0、maximum-scale=1.0、er-scalable=noと書く目的は、ユーザが指でページのスケーリングを行いresetを導入することを防止することである.cssはmainにあります.jsにborderを導入する.cssは移動端1画素の枠線の問題を専門に解決する

npm install fastclick--save fastclickというサードパーティモジュールをインストール導入後、fastClickを以下に書く必要がある.attach(document.body)は、モバイル端末の300ミリ秒クリックイベントの遅延の問題

を解決するためである.

                   stylus stylus  sass

npm install stylus--save npm install stylus-loader--saveプロジェクトを再起動npm run startスタイルが頻繁に参照されている場合はファイルを作成し、$変数名を書くことができます.スタイル例:redその後、必要なstyleスタイルにスタイルを導入します.スタイルの場合は@importパスが必要です.

ファイルが頻繁に参照される場合、このファイルに別名を付けたいのは@=srcがbulidの下のwebpackを見つけたのと同じです.base.conf.jsディレクトリの下でresolveを探します例えば‘styles’:resolve(‘src/assets/styles’)エラーが発生したらnpm ruを再起動します

親コンポーネントにサブコンポーネントを導入する最初にimport名fromパスを登録し、最後にdivテンプレートで名前>

を使用して登録します.

まずswiperコンポーネントのswiperタグとswiper-slideタグをアイコンに包んでおけばいいのですが、データを直接ループして余計なものを2ページ目のアイコンに隠すべきものをcomputedという計算属性で配列中のデータを分割することができます例えば前のページに8つのデータしか保存できない場合は配列中のデータを2つの2つに分割します次元グループの2次元配列の下付き文字は、どのページに表示されるべきかcomputed:{pages(){//まず空の配列const pages=[]//を定義し、iconList内のデータをループします.itemは各データindexがthis.iconList.forEach((item,index)=>を指します.{//データが8個未満の場合、いずれも1ページ目が8より大きい場合は2ページ目const page=Math.float(index/8)//iconListに3つのデータがあると仮定するindexは2/8が0で0ページ目if(!pages[page]){pages[page]=[]}pages[page].push[item] }) return pages } }

各コンポーネントは、データを要求する必要があります.各サブコンポーネントは、親コンポーネントに送信してサブコンポーネントにデータを送信し、スタティックファイルをstaticフォルダに転送する必要があります.アクセスできるのは、アドレスバーに直接パスを入力してstaticファイルの内容を印刷することができます.他のフォルダではロードできませんが、開発環境でajaxであればローカルファイルを書くパスを求めて本番環境に移行するには、パスを/api/に変更する必要があるため、Vueの転送メカニズムでapiに対するすべてのリクエストをローカルパスstatic/mockフォルダに転送することができます(このフォルダはカスタマイズされています).このように開発環境でローカルの静的リソースを使用して具体的な変更を行うにはconfig>indexが必要です.js>proxyTable:{ ‘/api’:{ target:‘http://localhost:8080',paghRewrite:{'^/api':'/static/mock'}}プロファイルを変更するには、サーバを再起動してデータを取得した後、サブコンポーネント

に渡す必要があります.

都市選択ページのルーティング構成は、まずrouterファイルに入ってルーティングパスに対応するルーティングを構成し、ジャンプしたい領域の外にrouter-link to='パスをセットする.このパスはコンポーネントと構成されているので、クリックすると対応するコンポーネントにジャンプする.構成されたmetaはコンポーネントでthis.$を使用できます.route.meta表示

拡張演算子の詳細https://www.cnblogs.com/chrischjh/p/4848934.html

Vueのmixinsは、コンポーネントを多重化するために生成されたハイブリッドプラグイン

である.

vue-loaderは、Vueファイルをjsモジュールに変換できる詳細を参照してください.https://blog.csdn.net/weixin_38788947/article/details/76718402

18.Vueでのtab切り替えhttps://www.jb51.net/article/122451.htmisは、一部の要素の内部でカスタムコンポーネントを使用できないという問題を解決するためである.例えば、ulの下でli isと一致しなければならないのは、登録済みのコンポーネントである.isの後と変数という変数は、そのコンポーネント20を表す.ラッキーターンテーブルhttps://www.github.com/landluck/lucky_wheelsコードの具体的な実行はgithubに21と書きます.1つのプロジェクトを書くのが複雑な場合、中で使用するgetter muation actionが多い場合、彼らをいくつか異なるjsフォルダ22に分割することができます.vueにカプセル化されたjsは、コンポーネントで使用する場合はmain.jsにおける導入が完了するとvueの直接用vueとなる.user()vue専用でない場合は、サブコンポーネント呼び出しのためにvueのプロトタイプチェーンにバインドします.
23.vueチャット送信表情またはコメント送信表情https://github.com/jkchao/vue-emoji